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

112

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

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

在Safari和Chrome上运行良好（边缘更锐利，线条更细）。有什么方法可以在Firefox和Opera上实现相同的样式吗？

— 马特
source

5

最好停止这样做，并在这里阅读原因：usabilitypost.com/2012/11/05/stop-fixing-font-smoothing

— fregante

20

^这是一个广泛的概括，可以使用字体平滑处理。问题是渲染问题，而不是设计师的行为。当您设计布局时，由于呈现引擎，字体显示为半粗体，那么需要固定的是引擎，而不是布局。

— 迪伦2014年

1

这不完全是广义的概括。文章说，亚像素渲染的主要目的是使深色背景上的浅色文本更易读（即可访问），并且使宽泛的CSS定义body { -webkit-font-smoothing: antialiased; }过于笨拙。

— Matt Scheurich 2014年

3

我的浅色背景上深色的网络字体也被“仿冒”。我到处都说“抗锯齿”。

— 杰森·费瑟辛汉姆

5

页面的显示方式取决于设计者，包括所有印刷属性。确保跨各种平台的可用性，一致性和吸引力是他们的责任。通过CSS访问字体平滑属性可以实现更好的控制。像任何东西一样，它可能会被错误地使用。但是，吹捧个人哲学而不是回答问题并没有帮助。

— Beejor

193

由于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。

— 马克西米利安·霍夫曼（Maximilian Hoffmann）
source

6

为什么只有OSX？

— Yassir Ennazk 2013年

7

Windows和Linux使用与OSX不同的字体渲染算法。

— Maximilian Hoffmann 2013年

15

好吧，Firefox不支持这样的功能。

在Mozilla的参考页中，指定font-smoothCSS属性控制字体渲染时抗锯齿的应用，但是此属性已从规范中删除，目前不在标准轨道上。

Webkit浏览器仅支持此属性。

如果您想要替代方法，可以检查以下内容：

— 乔纳森·纳金
source

2

好吧，我的问题是我的字体看起来像“粗体”，在Firefox和Opera中却显得blo肿。这样-webkit-font-smoothing:antialiased;我就可以在Safari和Chrome中修复它。我很想找到任何“ hack”来使我的字体在Firefox中也更轻一些。我想text-shadow只在moz 中应用白色，但是没有办法应用“嵌入”文本阴影来减轻字体的字体。

— 马特2012年

1

@matt您可以在此问题中尝试一些CSS建议：stackoverflow.com/questions/761778/…也许您找到了一些CSS替代方法。

— 乔纳森·纳金

11

案例：浅色文本在深色背景上带有锯齿状的Web字体Firefox（v35）/ Windows
示例：Google Web字体Ruda

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

selector {
    text-shadow: 0 0 0;
}

实际上，结果与相同text-shadow: 0 0;，但我想显式设置模糊半径。

它不是通用解决方案，但在某些情况下可能会有所帮助。而且，到目前为止，我还没有经历过（也没有经过全面测试）该解决方案对性能的负面影响。

— 沃尔克E.
source

无济于事

— vsync 2015年

这将导致基于该字体的chrome上的

— 粗体

1

@BenSewards您是否会提供一种字体，让您遇到大胆的字体渲染？甚至是CodePen？提前致谢。

— Volker E.

1

@VolkerE。感谢您的出色解决方案。我在粘性页眉中使用源代码Pro字体遇到同样令人讨厌的问题。当我滚动字体时，字体非常小，并且带有文本阴影，字体没有任何问题。

— Evolutio

在当前的Chrome（58.0.3029.110）上，“平滑”文本实际上看起来确实很可怕。（“锯齿状”文本会更好）

— RecursiveExceptionException

7

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

— ze
source

在Windows中吗？

— Vignesh

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）
您将获得所有webfonts的完美拉链！

我希望这将有所帮助。

— 普利西·斯特凡
source

在解决css过渡期间的字体锯齿方面做得很好（尽管没有完全删除它）。我使用了带有TTFAutohint选项的FontSquirrel生成器

— Andrey

我启用了Windows自动提示功能，使用Fontie重新生成了WOFF，WOFF2，EOT和SVG文件。

— 多米尼克（Dominique）

4

...在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;

}

— 用户名
source

2

对不起...什么是“ reinschreiben”？我们大多数人不会说德语，因此，如果您用英语撰写整篇文章，那会很好。

— rayryeng

3

哦，拜托，我很抱歉已经用Google翻译了，自从滑倒之后，不知何故这个词:)

— user3634787 2015年

3

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

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

— 克里斯蒂尔
source

问题是关于Firefox和Opera的。因此，此答案与问题无关

— vsync

-4

新增中

font-weight: normal;

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

— 亚伦八世
source

7

font-weight（毫不奇怪）会影响字体粗细，而不影响字体平滑度。如果链接的字体文件不是普通字体字体文件，则将其添加到@ font-face声明中会引起混淆。

— Mike Meyer

@MikeMeyer实际上，我同意亚伦的评论。添加字体粗细：普通的字体包含“轻”字体似乎会增加混淆，但是这只会使新手开发人员感到困惑。根据我的经验，指定默认的默认值实际上是一种好习惯。在这种情况下，“普通”是指所包含的字体和所使用的字符为“普通”，而不是要指定有关字体外观本身的信息。在许多情况下，它将（尤其是在大型平台上）减少您在字体样式周围看到的非常典型的不良体系结构引起的错误的可能性。

— dudewad 2014年

实际上，默认情况下，字体外观本身的名称应表示字体的粗细...！

— dudewad 2014年

@dudewad，您同意是件好事，是的，这是一个不错的（尽管措辞简洁）“ pro-tip” font-weight。事情是，OP没在问font-weight-他在问抗锯齿。这是一个完全不同的问题的正确答案。

— Mike Meyer

@MikeMeyer你完全正确。有时我有些不高兴。;）

— dudewad 2014年