Question

我的网站上嵌入了一些自定义的webfonts，我使用的是

之类的东西

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

设置渲染输出的样式。这在Safari和Chrome中运行良好。我得到更清晰的边缘和更细的线条。

在Firefox中有没有办法做这样的事情？还是歌剧？

Answer 1

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

Firefox最终添加了一个属性来启用灰度抗锯齿。经过一段很长的discussion，它将在第25版中提供另一种语法，它指出此属性仅适用于OS X.

-moz-osx-font-smoothing: grayscale;

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

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

您可以阅读包含Sass mixin的my post about font rendering on OSX来处理这两个属性。

Answer 2

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

在Mozilla的参考页面中指定font-smooth，因为CSS属性控制渲染字体时的抗锯齿应用程序，但此属性已从此规范删除，目前尚未在标准轨道上。

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

如果您想要替代方案，可以查看：

Answer 3

案例：在深色背景上使用锯齿状网页字体的浅色文字Firefox（v35）/ Windows
示例：Google Web Font Ruda

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

selector {
    text-shadow: 0 0 0;
}

实际上，结果与text-shadow: 0 0;相同，但我喜欢明确设置模糊半径。

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

Answer 4

在遇到问题之后，我发现我的WOFF文件没有正确完成，我向FontSquirrel发送了一个新的TTF，这给了我一个在Firefox中顺利的WOFF而没有添加任何额外的CSS

Answer 5

我找到了这个链接的解决方案： 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！

我希望这会有所帮助。

Answer 6

...在body标签中，这些内容和字体在一般情况下看起来更好......

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;

}

Answer 7

当文字颜色较暗时，在Safari和Chrome中，我的文字笔画css属性效果更好。

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

Answer 8

添加

font-weight: normal;

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

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

8 个答案: