我在我的网站上使用了定制的网络字体。为了设置渲染输出的样式,我使用了以下代码:
//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;
这在 Safari 和 Chrome 上运行良好(边缘更锐利,线条更细)。有没有办法在 Firefox 和 Opera 上实现相同的样式?
我在我的网站上使用了定制的网络字体。为了设置渲染输出的样式,我使用了以下代码:
//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;
这在 Safari 和 Chrome 上运行良好(边缘更锐利,线条更细)。有没有办法在 Firefox 和 Opera 上实现相同的样式?
由于 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 来处理这两个属性。
好吧,Firefox 不支持这样的东西。
在来自 Mozilla 的参考页面中,font-smooth
将 CSS 属性指定为在呈现字体时控制抗锯齿的应用,但该属性已从本规范中删除,目前不在标准轨道上。
此属性仅在 Webkit 浏览器中受支持。
如果你想要一个替代方案,你可以检查这个:
案例:深色背景上带有锯齿网络字体的浅色文本 Firefox (v35)/Windows
示例:Google Web Font Ruda
令人惊讶的解决方案 -
向应用的选择器添加以下属性:
selector {
text-shadow: 0 0 0;
}
实际上,结果与 相同text-shadow: 0 0;
,但我喜欢明确设置模糊半径。
这不是一个通用的解决方案,但在某些情况下可能会有所帮助。此外,到目前为止,我还没有经历过(也没有彻底测试过)这个解决方案对性能的负面影响。
遇到问题后,我发现我的 WOFF 文件没有正确完成,我向FontSquirrel发送了一个新的 TTF,它为我提供了一个在 Firefox 中流畅的 WOFF,而无需添加任何额外的 CSS。
我通过此链接找到了解决方案:http: //pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/
循序渐进的方法:
apt-get install ttfautohint
):ttfautohint --strong-stem-width=g neosansstd-black.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;
}
当文本颜色较暗时,在 Safari 和 Chrome 中,使用 text-stroke css 属性可以获得更好的结果。
-webkit-text-stroke: 0.5px #000;
添加
font-weight: normal;
您的 @font-face 字体将修复 Firefox 中的粗体外观。