例如，我注意到这个woo 主题设置在 HTML 标记上，因此整个网站的文本都设置了它。我读到它可能会导致性能问题，但那是不久前的事了。有些人建议只将其添加到标题和大文本中。
现在规则变了吗？浏览器是否可以很好地使用它？
问问题
33103 次
6 回答
36
否：多年来，各种平台上存在许多导致文本无法显示或显示不正确的错误（见下文）。如果您的目标是启用连字，那么CSS Fonts Level 3font-variant-ligatures中实际上定义了标准属性，可提供完全控制：
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 错误导致 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 上的兼容性问题和一般性能问题
于 2012-09-14T18:30:44.613 回答
25
来自 MDN文本渲染页面，最后更新于2012 年 4 月 29 日 18:27，内容如下：
text-rendering CSS 属性向渲染引擎提供有关在渲染文本时优化什么的信息。浏览器在速度、易读性和几何精度之间进行权衡。text-rendering 属性是一个未在任何 CSS 标准中定义的 SVG 属性。但是，Gecko 和 WebKit 浏览器允许您将此属性应用于 Windows、Mac OS X 和 Linux 上的 HTML 和 XML 内容。
这告诉我们它没有在任何 CSS 标准中定义，因此导致跨浏览器问题，如浏览器兼容性表所示。
默认
浏览器在绘制文本时对何时优化速度、易读性和几何精度做出有根据的猜测。
因此，可以安全地假设最好的选择是让浏览器处理这样的细节，因为这个功能不是标准的（目前），而且大多数浏览器不支持它。
于 2012-06-05T13:07:10.473 回答
8
text-rendering: optimizeLegibility;在我们的一个网络应用程序中使用。它在所有浏览器中都正确呈现，除了 Windows 7 上的一个 - chrome (64)。
不得不删除该属性，因为我们的大多数最终用户都来自该类别。
于 2013-03-06T07:32:49.333 回答
4
我刚刚修复了 Chrome 拒绝呈现网络字体的错误（它总是退回到非网络字体，我们无法辨别）。最后 - 经过相当多的头疼后 - 通过将文本渲染从optimizeLegibility（由 Twitter Bootstrap 设置，它的价值）设置为auto.
所以我暂时说答案可能是“不”。这并不是说不要使用它，而是不要将其应用于所有内容。在需要的地方使用它并仔细测试它的怪异或意外效果（尤其是在 Chrome 中！）。
于 2013-04-25T18:17:46.030 回答
2
使用“文本渲染：优化易读性”也会导致 android 本机浏览器（4.2 和 4.3）出现渲染错误。如果您将此属性与通过@font-face加载新字体结合使用，则字体根本不会显示（仅回退）。如果没有“文本渲染：优化易读性”和@font-face，字体会按预期加载并显示。
于 2014-07-14T13:57:03.570 回答
0
CSS 文本渲染看起来很不稳定。与其用糟糕的 CSS 属性来浪费时间，不如用这个……
如果 Javascript 是您的选择，Kerning.js 看起来很有希望，这是一种托管在 Github 上的 javascript 方法来处理字距调整和字距调整对。
另外值得注意的是，如果您对排版很认真，可以使用 Font Squirrel 免费使用网络字体。
于 2013-02-02T18:14:19.863 回答