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

Question

我注意到这个woo主题例如它设置在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添加相关属性之前,旧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 文本呈现页面,最后更新于2012年4月29日18:27,内容如下:

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

它告诉我们它没有在任何CSS标准中定义,从而导致跨浏览器问题,如浏览器兼容性表所示.

默认情况下

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

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

Answer 3

text-rendering: optimizeLegibility;用于我们的一个网络应用程序.它在所有浏览器中正确呈现,除了一个 - 在Windows 7上的chrome(64).

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