Firefox 和 Opera 中的 Webfont 平滑和抗锯齿 [英] Webfont Smoothing and Antialiasing in Firefox and Opera

问题描述

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

I have custom-made web fonts used on my site. To style my rendering output, I used the following code:

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

这在 Safari 和 Chrome 上运行良好(边缘更清晰，线条更细).有没有办法在 Firefox 和 Opera 上实现相同的样式?

This works fine on Safari and Chrome (edges are sharper and lines are thinner). Is there any way of implementing the same style on Firefox and Opera?

推荐答案

因为 Opera 从 15.0 版开始由 Blink 提供支持 -webkit-font-smoothing: antialiased 也适用于 Opera.

As Opera is powered by Blink since Version 15.0 -webkit-font-smoothing: antialiased does also work on Opera.

Firefox 终于添加了一个属性来启用灰度抗锯齿.经过长时间的讨论之后，它将在版本 25 中使用另一种语法，指出此属性仅适用于 OS X.

Firefox has finally added a property to enable grayscaled antialiasing. After a long discussion it will be available in Version 25 with another syntax, which points out that this property only works on OS X.

-moz-osx-font-smoothing: grayscale;

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

This should fix blurry icon fonts or light text on dark backgrounds.

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

您可以阅读我关于 OSX 字体渲染的帖子 包括一个 Sass mixin 来处理这两个属性.

You may read my post about font rendering on OSX which includes a Sass mixin to handle both properties.

这篇关于Firefox 和 Opera 中的 Webfont 平滑和抗锯齿的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！