Question

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

现在规则有变化吗？浏览器是否表现良好？

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之前＆amp;添加了相关属性，较旧的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/也有更多的讨论。

Bug Gallery

由于各种渲染问题，流行的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上的兼容性问题和一般性能问题

Answer 2

来自MDN text-rendering页面，最后更新于 2012年4月29日18:27 ，内容如下：

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

告诉我们它没有在任何CSS标准中定义，从而导致跨浏览器问题，如Browser compatibility表所示。

默认

浏览器在绘制文本时做出有关何时优化速度，易读性和几何精度的有根据的猜测。

因此，可以安全地假设最好的选择是让浏览器处理这样的细节，因为此功能不是标准（尚未），并且大多数浏览器不支持它

Answer 3

text-rendering: optimizeLegibility;用于我们的某个网络应用中。它在所有浏览器中都正确呈现，除了一个 - 在Windows 7上的chrome（64）。

由于我们的大多数最终用户来自该类别，因此必须删除该属性。

Answer 4

我刚刚修正了Chrome拒绝呈现网络字体的错误（它总是回归到非网络字体，我们无法辨别）。最后 - 在经过大量的头痛之后 - 通过将文本呈现从optimizeLegibility（由Twitter Bootstrap设置，为了它的价值）设置为auto来解决问题。

所以我现在想说答案可能是“不”。这并不是说不要使用它，但不要将它应用于一切。在需要的地方使用它并仔细测试它是否存在奇怪或意外的影响（特别是在Chrome中！）。

Answer 5

使用＆＃34;文本呈现：optimizelegibility＆＃34;还会导致Android原生浏览器中的渲染错误（4.2和4.3）。如果将此属性与通过 @ font-face 加载新字体结合使用，则字体根本不会显示（仅后退）。没有＆＃34;文本呈现：optimizelegibility＆＃34;和@ font-face字体加载并按预期显示。

Answer 6

CSS文字渲染看起来很不稳定。不要用糟糕的CSS属性来磨练时间，这可能是值得的......

如果Javascript是你的选择，Kerning.js看起来很有前途，这是一种javascript方法，用于在Github上托管的字距调整和字距调整对。

http://kerningjs.com

另外值得注意的是，如果你对排版很认真，可以使用Font Squirrel免费使用网页字体。

http://www.fontsquirrel.com

使用CSS规则“text-rendering：optimizelegibility”是否安全？在所有文字？

6 个答案:

历史

Bug Gallery