大文本在 Firefox 中呈现模糊，但在 Chrome 中清晰
Posted
技术标签:
【中文标题】大文本在 Firefox 中呈现模糊，但在 Chrome 中清晰【英文标题】：large text renders blurry in Firefox but sharp in Chrome 【发布时间】：2020-11-17 22:18:51 【问题描述】：我正在开发一个非常简单的网络应用程序，并希望以非常大的字体显示一些文本。当我在 Firefox 中打开页面时，文本在边缘呈现相当模糊或模糊，而在 Chrome 中显示清晰锐利。重现这一点的 html/CSS 非常简单，我最初使用的是 webfont，但即使切换到简单的 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 PC。
有没有一种可靠的方法来呈现像这样的大文本并让它在 Firefox 中看起来不错？我愿意接受任何建议，我对这个项目没有太多限制。
感谢您的任何帮助或建议。
【问题讨论】：
似乎是 FF 怪癖。虽然不是很可取，但是使用 SVG 文本怎么样？这样你至少可以修改它的text-rendering 属性...不理想，我知道...（我针对 Edge 测试了 FF）
这是我在Codepen 上创建的快速比较。值得把它变成一个正确的答案吗？ （显然在 Firefox 中打开它...）
感谢您的浏览。那个codepen对我来说看起来一样，它应该看起来不同吗？ imgur.com/a/k4mP065
尝试向下滚动，它会显示您的 <div> 和下方的 SVG 替代品。在 FF 中打开并最大化您的窗口。你想要清晰的大文本，现在你明白了......
对不起，我错过了，是的，效果很好，解决了问题。如果你把它变成一个答案，我会接受它。谢谢
【参考方案1】：
在测试了几个浏览器（Chorm/Edge/Firefox）之后，这似乎是 Firefox 特有的问题（怪癖？功能？）对于您的具体问题没有适当的解决方法，-webkit-font-smoothing, -moz-osx-font-smoothing, font-smooth 无效。
如果可能的话，您可以尝试在这种情况下使用 SVG text，因为 SVG（可能）使用完全不同的图形例程，并且您可以使用 SVG text-rendering 属性来（在一定程度上）根据您的需要定制脆度。
这里是纯 HTML 与 SVG 文本比较的 sn-p（需要 全页 视图）：
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 中清晰的主要内容，如果未能解决你的问题，请参考以下文章
图片在 Chrome 中显示，但在 Firefox 中不显示
如何让 Firefox 和 IE 在 flexbox 布局中正确呈现写作模式？
Highcharts Legend 问题：我想让 Legend 100% 宽度和文本中心对齐它在 crome 中工作正常，但在 Firefox 中没有对齐中心