Webfont Smoothing和Antialiasing在Firefox和Opera [英] Webfont Smoothing and Antialiasing in Firefox and Opera

问题描述

我有一些自定义的webfonts嵌入我的网站，我使用的东西，如

I have some custom made webfonts embedded on my site and I use stuff like

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

来渲染渲染输出。这工作正常在Safari和Chrome。我得到更清晰的边缘和更细的线条。

to style my rendering output. This works just fine in Safari and Chrome. I get way sharper edges and thinner lines.

有没有办法做这样的东西像Firefox？或Opera？

Is there any way of doing stuff like that in Firefox? Or Opera?

推荐答案

由于Opera由15.0版本以来支持 -webkit-font-smoothing：抗锯齿也适用于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.

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