时间戳

首页 > 解决方案 > 大文本在 Firefox 中呈现模糊，但在 Chrome 中清晰

css - 大文本在 Firefox 中呈现模糊，但在 Chrome 中清晰

问题描述

我正在开发一个非常简单的网络应用程序，并希望以非常大的字体显示一些文本。当我在 Firefox 中打开页面时，文本在边缘呈现相当模糊或模糊，而在 Chrome 中显示清晰锐利。重现这一点的 HTML/CSS 非常简单，我最初使用的是网络字体，但即使切换到简单的 Arial，我也看到了同样的结果：https ://jsfiddle.net/2vwjpuc4/

这是一些屏幕截图：

截图 1 截图 2

<!DOCTYPE html>
<html>
<head>
    <title>title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
</head>
<body>
    <div id="results">0.68</div>
</body>
</html>

#results {
    font-size: 800px;
    font-family: 'Arial';
}

我没有做太多的前端开发，所以请耐心等待。我知道有很多类似的问题，但是对于 Firefox 上的大文本，我无法找到完全涵盖这种情况的任何内容。这台计算机上的 Firefox 中正常大小的文本看起来很好，与 Chrome 没有区别。顺便说一句，这是一台 Windows 10 PC。

有没有一种可靠的方法来呈现这样的大文本并让它在 Firefox 中看起来不错？我愿意接受任何建议，我对这个项目没有太多限制。

感谢您的任何帮助或建议。

标签： cssfirefoxfonts

解决方案

在测试了几个浏览器（Chorm/Edge/Firefox）之后，这似乎是一个 Firefox 特定的问题（怪癖？功能？）对于您的特定问题没有适当的解决方法，-webkit-font-smoothing, -moz-osx-font-smoothing, font-smooth没有效果。

如果可能的话，您可以尝试SVG text在这种情况下使用 SVG（可能）使用完全不同的图形例程，并且您可以使用 SVGtext-rendering属性来定制脆度（在某种程度上）满足您的需求。

这是一个比较纯 HTML 与 SVG 文本的片段（需要完整页面视图）：

html, body, svg {
  height: 100%; font-family: 'Arial';
}

#results {
    font-size: 800px;
    font-family: 'Arial';
}
<div id="results">0.68</div>

<svg viewBox="0 0 140 22" xmlns="http://www.w3.org/2000/svg">
  <text y="12" text-rendering="geometricPrecision">0.68</text>
</svg>

推荐阅读