使用 CSS 规则“文本渲染：优化易读性”是否安全？在所有文字上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7968795/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it safe to use the CSS rule "text-rendering: optimizelegibility;" on all text?
提问by firefusion
I noticed this woo themefor example has it set on the HTML tag and therefore the whole site's text has it set. I read that it can cause performance problems but that was a while ago. Some people suggested only adding it to headers and big text.
我注意到这个woo 主题例如将它设置在 HTML 标签上，因此整个网站的文本都设置了它。我读到它会导致性能问题，但那是不久前的事了。有些人建议只将它添加到标题和大文本中。
Have the rules changed now? Do browsers perform well with it?
现在规则变了吗？浏览器对它的表现好吗？
回答by Chris Adams
No: there have been many bugs over the years on various platforms which cause text not to be displayed or displayed incorrectly (see below). If your goal is to enable ligatures, there's actually standard property font-variant-ligaturesdefined in CSS Fonts Level 3which offers full control:
否：多年来在各种平台上存在许多导致文本无法显示或显示不正确的错误（见下文）。如果您的目标是启用连字，那么CSS Fonts Level 3 中实际上font-variant-ligatures定义了标准属性，可提供完全控制：
font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
See font-variantfor other typographic features which can be enabled such as small caps, alternate letter forms, etc.
有关font-variant可以启用的其他排版功能，例如小型大写字母、替代字母形式等，请参阅。
History
历史
Before font-variant-ligatures& the related properties were added, the older font-feature-settingsproperty allowed the same feature to be enabled. This is a lower-level interface and is no longer recommended except to enable OpenType features which do not have a higher-level interface.
在font-variant-ligatures添加相关属性之前，旧font-feature-settings属性允许启用相同的功能。这是一个较低级别的接口，不再推荐，除非启用没有更高级别接口的 OpenType 功能。
http://blog.fontdeck.com/post/15777165734/opentype-1has a simple example:
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/has more discussion as well.
http://elliotjaystocks.com/blog/the-fine-flourish-of-the-ligature/也有更多讨论。
Bug Gallery
错误库
The popular HTML5 Boilerplate project removed it two years ago due to various rendering problems:
由于各种渲染问题，流行的 HTML5 Boilerplate 项目在两年前将其删除：
https://github.com/h5bp/html5-boilerplate/issues/78
https://github.com/h5bp/html5-boilerplate/issues/78
Two Chromium bugs which I just fixed this morning caused Chrome 21 on Windows XP to either fail to perform font substitution at all, displaying the missing character symbol rather than using one from a different font, and displaying text incorrectly overlapping other elements:
我今天早上刚修复的两个 Chromium 错误导致 Windows XP 上的 Chrome 21 要么根本无法执行字体替换，要么显示丢失的字符符号而不是使用不同字体的符号，以及显示文本错误地与其他元素重叠：
http://code.google.com/p/chromium/issues/detail?id=114719
http://code.google.com/p/chromium/issues/detail?id=114719
http://code.google.com/p/chromium/issues/detail?id=149548
http://code.google.com/p/chromium/issues/detail?id=149548
See http://aestheticallyloyal.com/public/optimize-legibility/for a few other concerns.
有关其他一些问题，请参阅http://aestheticallyloyal.com/public/optimize-legibility/。
http://bocoup.com/weblog/text-rendering/highlighted compatibility problems on Android and general performance issues
http://bocoup.com/weblog/text-rendering/强调了 Android 上的兼容性问题和一般性能问题
回答by Zuul
from the MDN text-renderingpage, last updated on 18:27, 29 Apr 2012, it reads:
来自 MDN文本渲染页面，最后更新时间为2012 年 4 月 29 日 18:27，内容如下：
The text-rendering CSS property provides information to the rendering engine about what to optimize for when rendering text. The browser makes trade-offs among speed, legibility, and geometric precision. The text-rendering property is an SVG property that is not defined in any CSS standard. However, Gecko and WebKit browsers let you apply this property to HTML and XML content on Windows, Mac OS X and Linux.
文本渲染 CSS 属性向渲染引擎提供有关渲染文本时优化内容的信息。浏览器在速度、易读性和几何精度之间进行权衡。text-rendering 属性是一个 SVG 属性，没有在任何 CSS 标准中定义。但是，Gecko 和 WebKit 浏览器允许您将此属性应用于 Windows、Mac OS X 和 Linux 上的 HTML 和 XML 内容。
which tels us that it is not defined in any CSS standard, thus leading to cross-browser issues, as seen on the Browser compatibilitytable.
这告诉我们它没有在任何 CSS 标准中定义，从而导致跨浏览器问题，如浏览器兼容性表所示。
By default
默认情况下
The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text.
浏览器对绘制文本时何时优化速度、易读性和几何精度进行有根据的猜测。
So, is safe to assume that the best option is to let the browser take care of details like this, since this feature is not a standard (yet), and most browsers don't support it.
因此，可以安全地假设最好的选择是让浏览器处理这样的细节，因为此功能不是标准（尚未），并且大多数浏览器都不支持它。
回答by RoRRe
text-rendering: optimizeLegibility;was used in one of our web apps. it rendered properly in all browsers, except one - chrome (64) on windows 7.
text-rendering: optimizeLegibility;用于我们的一个网络应用程序。它在所有浏览器中都能正确呈现，除了一个 - Windows 7 上的 chrome (64)。
Had to remove the property as most of our end users were from that category.
不得不删除该属性，因为我们的大多数最终用户都来自该类别。
回答by Nick F
I've just fixed a bug where Chrome was refusing to render web fonts (it always fell back to a non-web one, for no reason we could discern). In the end - after considerable amount of head-scratching - the problem was fixed by setting text-rendering from optimizeLegibility(which had been set by Twitter Bootstrap, for what it's worth) to auto.
我刚刚修复了一个错误，即 Chrome 拒绝呈现网络字体（它总是退回到非网络字体，我们无缘无故地辨别出来）。最后 - 经过大量的头疼 - 通过将文本渲染optimizeLegibility设置为auto.
So I would say for the moment the answer is probably "no". Which isn't to say don't use it, but don't apply it to everything. Use it where needed and test it carefully for weirdnesses or unexpected effects (especially in Chrome!).
所以我暂时说答案可能是“不”。这并不是说不要使用它，而是不要将它应用于所有事情。在需要的地方使用它并仔细测试它的怪异或意外效果（尤其是在 Chrome 中！）。
回答by Kris
using "text-rendering: optimizelegibility" also causes rendering errors in android native browser (4.2 & 4.3). If you use this attribute in combination with loading new fonts via @font-face, the font will not display at all (only fallback). without "text-rendering: optimizelegibility" and @font-face the font loads and gets displayed as expected.
使用 "text-rendering: optimizelegibility" 也会导致 android 本机浏览器 (4.2 & 4.3) 中的渲染错误。如果您将此属性与通过@font-face加载新字体结合使用，则字体根本不会显示（仅作为后备）。没有“文本渲染：优化可读性”和@font-face 字体加载并按预期显示。
回答by unidentified-1
CSS text-rendering looks shaky. Instead of grinding time with a poor CSS property, it may be worthwhile to go with this...
CSS 文本渲染看起来不稳定。与其用糟糕的 CSS 属性来磨练时间，不如选择这个......
If Javascript is an option for you, Kerning.js looks promising, a javascript approach to kerning and kerning pairs hosted on Github.
如果您可以选择 Javascript，那么 Kerning.js 看起来很有希望，这是一种在 Github 上托管的字距调整和字距调整对的 JavaScript 方法。
Also worth noting, if you are getting serious about typography, there is Font Squirrel free use web fonts.
另外值得注意的是，如果您对排版很认真，可以使用 Font Squirrel 免费使用网络字体。
