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

Question

我注意到这个 woo theme例如，在 HTML 标记上设置了它，因此整个站点的文本都设置了它。我读到它可能会导致性能问题，但那是不久前的事了。有些人建议只将它添加到标题和大文本中。

现在规则变了吗？浏览器是否能很好地处理它？<​​/p>

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属性允许启用相同的功能。这是一个较低级别的接口(interface)，不再推荐使用，除非启用没有较高级别接口(interface)的 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 错误导致 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 上的兼容性问题和一般性能问题