在所有文本上使用CSS规则“text-rendering: optimizelegibility;”是否安全？

Question

例如我注意到这个 Woo主题 就将它设置在HTML标签上，因此整个网站的文本都使用了这个设置。不过我读到过一些文章说这样会影响性能，但那是很久以前的事情了。有些人建议只在标题和大段文字中添加这个设置。

现在规则是否已经改变了？浏览器是否对其有很好的支持？

- firefusion

---

当我滚动时，该网站对我来说有点卡顿。 我在64位Linux上运行Chrome 16.0.904。 - Blender

也可能是所有的CSS3透明度和下拉阴影。我知道要经过显卡处理；在Linux上可能会更麻烦一些。 - firefusion

我使用9800GT进行硬件加速。 - Blender

值得注意的是，在Android 2.2和2.3上，“text-rendering: optimizelegibility;”存在问题：http://code.google.com/p/android/issues/detail?id=15067 :( - John Carter

（以及由此错误引起的后果：http://stackoverflow.com/search?q=%5Bandroid%5D+optimizelegibility） - John Carter

我希望这些2014/2015年的答案能够添加更多信息。大多数谷歌搜索结果仍然是2011年的讨论！ - Eric L.

Answer 1

不，多年来在各种平台上都存在许多错误导致文本无法显示或显示不正确（请参见下文）。如果您的目标是启用连字，则实际上有一个标准属性font-variant-ligatures在CSS Fonts Level 3中定义，可提供完全控制：

font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;

请查看font-variant以启用其他排版特性，例如小型大写字母、备用字形等。

历史

在添加font-variant-ligatures及相关属性之前，旧的font-feature-settings属性允许启用相同的功能。这是一个较低级别的接口，不再建议使用，除非启用没有更高级别接口的OpenType功能。

http://blog.fontdeck.com/post/15777165734/opentype-1提供了一个简单的示例：

h1 {
    -webkit-font-feature-settings: "liga", "dlig";
    -moz-font-feature-settings: "liga=1, dlig=1";
    -ms-font-feature-settings: "liga", "dlig";
    font-feature-settings: "liga", "dlig";
}

http://elliotjaystocks.com/blog/the-fine-flourish-of-the-ligature/这里有更多的讨论。

漏洞展示

由于各种渲染问题，流行的HTML5 Boilerplate项目在两年前将其删除：

https://github.com/h5bp/html5-boilerplate/issues/78

今天早上我解决了两个 Chromium 的 bug，这些 bug 会导致 Windows XP 上的 Chrome 21 在执行字体替换时完全失败，显示缺失字符符号而不是使用来自其他字体的字符，并且文字会错误地重叠在其他元素上：

http://code.google.com/p/chromium/issues/detail?id=114719

http://code.google.com/p/chromium/issues/detail?id=149548

查看http://aestheticallyloyal.com/public/optimize-legibility/了解其他相关问题。 http://bocoup.com/weblog/text-rendering/强调了Android上的兼容性问题和一般性能问题。

- Chris Adams

---

请注意，Presto从未支持-o-font-feature-settings。通过切换到Blink Opera 15，开始支持-webkit-font-feature-settings。 - Volker E.

@VolkerE. - 谢谢 - 我刚刚删除了那一行。希望人们现在无论如何都能使用 font-variant-ligatures。 - Chris Adams

Answer 2

从MDN的text-rendering页面，最后更新于2012年4月29日18:27，它阐述了以下内容：

text-rendering CSS属性向渲染引擎提供有关在呈现文本时进行优化的信息。浏览器在速度、可读性和几何精度之间进行权衡。text-rendering属性是SVG属性，在任何CSS标准中都没有定义。但是，Gecko和WebKit浏览器允许您将此属性应用于Windows、Mac OS X和Linux上的HTML和XML内容。

这告诉我们该属性在任何CSS标准中都没有定义，因此可能会导致跨浏览器问题，如浏览器兼容性表格所示。

默认情况下

浏览器在绘制文本时进行速度、可读性和几何精度方面的智能猜测。

因此，最好让浏览器处理此类细节，因为此功能尚未成为标准（但可能会有），大多数浏览器也不支持它，因此安全假设最好的选择是使用默认设置。

- Zuul

Answer 3

在我们的一个Web应用程序中使用了text-rendering: optimizeLegibility;。它在所有浏览器中都能正确渲染，除了Windows 7上的Chrome（64）。

由于大多数最终用户都是该类别的用户，因此必须删除该属性。

- RoRRe

---

我也是。特别是因为“不正确地呈现”意味着如果HTML文本包含制表符，则实际上根本不会呈现单词。 - tardate

Answer 4

我刚刚解决了一个Chrome浏览器无法显示网络字体的bug(它总是回退到非网络字体，而我们无法找出原因)。最终，在经过长时间的思考后，问题被通过将文本渲染从optimizeLegibility（Twitter Bootstrap设置的）更改为auto来解决。

所以我想暂时的答案可能是“不行”。这并不意味着不使用它，但也不要将其应用于所有内容。只在需要时使用它，并仔细测试它是否会产生奇怪或意外的影响(特别是在Chrome中!)。

- Nick F

Answer 5

使用"text-rendering: optimizelegibility"属性在安卓原生浏览器（4.2和4.3）中会导致渲染错误。如果你在加载新字体时结合使用这个属性和@font-face，那么字体将完全不显示（只有回退字体）。如果没有使用"text-rendering: optimizelegibility"和@font-face，字体将按预期加载并显示。

- Kris

Answer 6

CSS的text-rendering属性看起来有些不稳定。与其花费时间在这个不太好的CSS属性上，也许值得尝试一下这个...

如果你可以使用Javascript，Kerning.js似乎是一个很有前途的选择，它是一个基于Javascript的字距和字距对处理工具，托管在Github上。

http://kerningjs.com

值得注意的是，如果你对排版非常认真，那么 Font Squirrel 提供免费使用的网络字体也是一个不错的选择。

http://www.fontsquirrel.com

- unidentified-1