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

Question

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

下面是一些屏幕截图：

<!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 台电脑。

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

感谢您的帮助或建议。

Answer 1

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

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

这里是一段比较普通 HTML 和 SVG 文本的片段（需要 SO 整页视图）：

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>

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

large text renders blurry in Firefox but sharp in Chrome

css

firefox

fonts