在 Firefox 和 Opera 中使用 Webfont 平滑和 Antialiasing

我在我的网站上使用了定制的网页字体。为了设计我的渲染输出，我使用了以下代码:

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

这在 Safari 和 Chrome 上效果很好(边缘更锋利，线条更细)。 有没有办法在 Firefox 和 Opera 上实现同样的风格？

332062 次浏览
小开

Firefox 不支持这样的东西。

In the reference page from Mozilla specifies font-smooth as CSS property controls the application of anti-aliasing when fonts are rendered, but this property has been 被移除了 from this specification and is currently not on the standard track.

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

如果你想要一个替代品，你可以这样检查:

小开

添加

font-weight: normal;

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

小开

由于 Opera 由 Blink 提供动力，因此15.0版 -webkit-font-smoothing: antialiased也可以在 Opera 上运行。

Firefox has finally added a property to enable grayscaled antialiasing. After a long 讨论 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;

这应该修复模糊的图标字体或暗背景上的光文本。

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

您可以读取 < strong > 我在 OSX 上关于字体渲染的帖子 ，它包含一个 Sass 混合函数来处理这两个属性。

小开

在遇到这个问题之后，我发现我的 WOFF 文件没有正确地完成，我发送了一个新的 TTF 到 FontSquirrel，它给了我一个正确的 WOFF，在 Firefox 中是平滑的，没有添加任何额外的 CSS 到它。

小开

在 Safari 和 Chrome 中，当文本颜色为深色时，我使用 css 属性得到了更好的效果。

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

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

循序渐进的方法:

  • 将字体发送到 WebFontGenerator 并获取压缩文件
  • 在 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)
  • 你会得到一个完美的拉链与你所有的网络字体！

希望这个能帮上忙。

小开

... 在主体标签和这些从内容和字体看起来更好一般..。

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;


}
小开

案例: 在深色背景 Firefox (v35)/Windows 上带有不规则网页字体的轻文本
例子: 谷歌网络字体鲁达

令人惊讶的解决方案-
adding following property to the applied selectors:

selector {
text-shadow: 0 0 0;
}

Actually, result is the same just with text-shadow: 0 0;, but I like to explicitly set blur-radius.

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


提交答案