Firefox 和 Opera 中的 Webfont 平滑和抗锯齿

Posted 2023-03-15

【中文标题】Firefox 和 Opera 中的 Webfont 平滑和抗锯齿

【英文标题】：Webfont Smoothing and Antialiasing in Firefox and Opera

【发布时间】：2012-07-12 16:05:12

【问题描述】：

我在我的网站上使用了定制的网络字体。为了设置渲染输出的样式，我使用了以下代码：

//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;

这在 Safari 和 Chrome 上运行良好（边缘更锐利，线条更细）。 有没有办法在 Firefox 和 Opera 上实现相同的样式？

【问题讨论】：

最好停止这样做并在此处阅读原因：usabilitypost.com/2012/11/05/stop-fixing-font-smoothing

^ 这是一个广泛的概括，可以使用字体平滑。问题在于渲染问题，而不是设计师的行为。当您设计布局并且由于渲染引擎而字体看起来是半粗体时，那么需要修复的是引擎，而不是布局。

这并不完全是一个广泛的概括。文章称，亚像素渲染主要是为了让深色背景上的浅色文本更易读（即易于访问），而像 body -webkit-font-smoothing: antialiased; 这样的宽泛 CSS 定义过于笨拙。

我在浅色背景上较暗的网络字体也变得“仿粗体”。我到处说“抗锯齿”。

页面如何显示取决于设计者，包括所有印刷属性。他们有责任确保在最广泛的平台上的可用性、一致性和吸引力。通过 CSS 访问字体平滑属性可以实现更好的控制。像任何事情一样，它可能会被错误的人滥用。但是吹捧个人哲学而不是回答问题是没有帮助的。

【参考方案1】：

由于 Opera 由 Blink 提供支持，因为版本 15.0 -webkit-font-smoothing: antialiased 也适用于 Opera。

Firefox 终于添加了一个属性来启用灰度抗锯齿。经过漫长的discussion 之后，它将在版本 25 中以另一种语法提供，这表明该属性仅适用于 OS X。

-moz-osx-font-smoothing: grayscale;

这应该可以修复模糊的图标字体或深色背景上的浅色文本。

.font-smoothing 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

您可以阅读my post about font rendering on OSX，其中包含一个用于处理这两个属性的 Sass 混合。

【讨论】：

Windows 和 Linux 使用与 OSX 不同的字体渲染算法。

【参考方案2】：

我通过此链接找到了解决方案： http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/

循序渐进的方法：

将您的字体发送到 WebFontGenerator 并获取 zip 在 Zip 文件中找到 TTF 字体 然后，在 linux 上，执行以下命令（或通过apt-get install ttfautohint 安装）：ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf 然后，再一次，在 WebFontGenerator 上发送新的 TTF 文件 (neosansstd-black.changed.ttf) 你会得到一个完美的 Zip 与你所有的网络字体！

我希望这会有所帮助。

【讨论】：

在修复 css 过渡期间的字体锯齿方面做得很好（尽管没有完全删除它）。我使用了带有 TTFAutohint 选项的 FontSquirrel 生成器

我使用 Fontie 重新生成了我的 WOFF、WOFF2、EOT 和 SVG 文件，并启用了 Windows 的自动提示。

【参考方案3】：

案例：深色背景 Firefox (v35)/Windows 上带有锯齿 Web 字体的浅色文本 示例：Google Web Font Ruda

令人惊讶的解决方案 - 向应用的选择器添加以下属性：

selector 
    text-shadow: 0 0 0;

其实text-shadow: 0 0;的结果是一样的，但是我喜欢显式设置blur-radius。

这不是一个通用的解决方案，但在某些情况下可能会有所帮助。此外，到目前为止，我还没有经历过（也没有彻底测试过）这个解决方案对性能的负面影响。

【讨论】：

没有任何帮助

这将根据字体在 chrome 上造成更粗的字体

@BenSewards 您能否提供一种字体，使您遇到更大胆的字体渲染？或者甚至是 CodePen？提前致谢。

@VolkerE。感谢您的出色解决方案。我对 Sticky Header 中的 Source Code Pro 字体也有同样烦人的问题。当我滚动字体时，字体变得非常小，并且使用您的文本阴影字体不会产生任何问题。

在当前的 chrome (58.0.3029.110) 上，“平滑”文本实际上看起来真的可怕。 （“锯齿状”文字更好）

【参考方案4】：

...在正文标签中，这些从内容和字体看起来总体上更好...

body, html 
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;

font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;



#content 
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

【讨论】：

对不起……什么是“reinschreiben”？我们中的大多数人都不会说德语，所以如果你用英语发表你的整个帖子会很好。

哦，对不起，我用谷歌翻译了，不知怎的，因为滑倒了错误的词:)

【参考方案5】：

好吧，Firefox 不支持这样的东西。

在来自 Mozilla 的参考页面中，将 font-smooth 指定为 CSS 属性，用于控制渲染字体时抗锯齿的应用，但该属性已从本规范中删除，目前不在标准轨道。

此属性仅在 Webkit 浏览器中受支持。

如果你想要一个替代方案，你可以检查这个：

Text-Shadow Anti-Aliasing | Philip Renich, Websites - blog cufón - fonts for the people

【讨论】：

嗯，我遇到的问题是我的字体在 Firefox 和 Opera 中看起来“粗体”并且臃肿。使用 -webkit-font-smoothing:antialiased; 我可以在 Safari 和 Chrome 中修复它。我很想找到任何“hack”来让我的字体在 Firefox 中更轻一些。我想只在 moz 中应用白色text-shadow，但没有办法应用“插入”文本阴影来使字体更亮。

@matt 您可以在这个问题中尝试一些 CSS 建议：***.com/questions/761778/… 也许您会找到一些 CSS 替代方案。

【参考方案6】：

当文本颜色较暗时，在 Safari 和 Chrome 中，使用 text-stroke css 属性效果更好。

-webkit-text-stroke: 0.5px #000;

【讨论】：

问题是关于 Firefox 和 Opera 的。所以这个答案与问题无关

【参考方案7】：

在遇到问题后，我发现我的 WOFF 文件没有正确完成，我向FontSquirrel 发送了一个新的 TTF，它为我提供了一个在 Firefox 中流畅且没有添加任何额外 CSS 的正确 WOFF。

【讨论】：

在windows中吗？

【参考方案8】：

添加

font-weight: normal;

@font-face 字体将修复 Firefox 中的粗体外观。

【讨论】：

font-weight（不出所料）影响字体粗细，而不是字体平滑。如果链接的字体文件不是正常粗细的字体文件，将其添加到@font-face 声明中会导致混淆。

@MikeMeyer 其实我同意 Aaron 的评论。添加 font-weight: normal 到作为“轻”字体的字体包含似乎会增加混乱，但它只会让新手开发人员感到困惑。根据我的经验，指定默认值实际上是一个好习惯。在这种情况下，正常是指包含的字体和正在使用的字符的“正常”，而不是指定有关字体本身的信息。在许多情况下，它会（特别是在大型平台上）减少您在字体样式周围看到的非常典型的不良架构产生错误的可能性。

其实字体本身的名字应该默认表示字体的粗细...！

@dudewad 很高兴你同意，是的，这是一个关于font-weight 的体面（虽然措辞简洁）“专业提示”。问题是，OP 并没有询问font-weight——他询问的是antialiasing。这是一个完全不同的问题的正确答案。

@MikeMeyer 你完全正确。我有时会有点得意忘形。 ;)