113

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

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

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

4

8 回答 8

195

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

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

-moz-osx-font-smoothing: grayscale;

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

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

你可以阅读我关于 OSX 上字体渲染的文章，其中包含一个 Sass mixin 来处理这两个属性。

于 2013-07-29T15:15:04.733 回答
15

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

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

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

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

于 2012-07-12T20:27:55.727 回答
11

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

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

selector {
    text-shadow: 0 0 0;
}

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

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

于 2015-02-06T22:50:51.240 回答
7

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

于 2013-10-03T14:49:53.800 回答
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
  • 然后，再将新的 TTF 文件 (neosansstd-black.changed.ttf) 发送到 WebFontGenerator
  • 你得到一个完美的 Zip 与你所有的 webfonts ！

我希望这将有所帮助。

于 2014-09-05T17:32:02.503 回答
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;

}
于 2015-01-02T17:58:28.047 回答
3

当文本颜色较暗时，在 Safari 和 Chrome 中，使用 text-stroke css 属性可以获得更好的结果。

-webkit-text-stroke: 0.5px #000;
于 2014-07-29T18:17:56.997 回答
-5

添加

font-weight: normal;

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

于 2013-06-07T01:57:25.290 回答