在所有的文本上使用CSS规则“text-rendering:optimizelegibility;”是否安全?

我注意到这个woo主题 ,例如,它已经设置在HTML标记,因此整个网站的文本已经设置。 我读到它可能会导致性能问题,但那是前一阵子。 有些人build议只将其添加到标题和大文本。

现在规则改变了吗? 浏览器的性能是否良好?

否:多年来在各种平台上出现了很多错误,导致文本不能正确显示或显示(见下文)。 如果您的目标是启用连字,实际上有CSS字体级别3中定义的标准属性font-variant-ligatures提供完全控制:

 font-variant-ligatures: common-ligatures; font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures; 

其他可以启用的印刷function的font-variant ,如小型大写字母,备用字母表单等

历史

在添加font-variant-ligatures和相关属性之前,较早的font-feature-settings属性允许启用相同的function。 这是一个较低级别的界面,不再推荐,除非启用没有更高级别界面的OpenTypefunction。

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/也有更多的讨论。

错误库

stream行的HTML5 Boilerplate项目由于各种呈现问​​题而在两年前将其删除:

https://github.com/h5bp/html5-boilerplate/issues/78

我刚刚修复的两个Chromium错误导致Windows XP上的Chrome 21无法执行字体replace,显示缺less的字符符号而不是使用不同的字体,并显示错误地重叠其他元素的文本:

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年4月29日18:27最后更新的MDN 文本呈现页面,它显示:

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

这让我们觉得它没有在CSS标准中定义,从而导致浏览器兼容性表中出现的跨浏览器问题。

默认

浏览器在绘制文本的同时,对于何时优化速度,可读性和几何精度进行了有根据的猜测。

所以,可以肯定的是,最好的select是让浏览器处理这样的细节,因为这个function不是标准的,大多数浏览器都不支持。

text-rendering: optimizeLegibility; 被用于我们的networking应用程序之一。 它在所有的浏览器中正确渲染,除了Windows 7上的一个chrome(64)。

由于大部分最终用户属于这一类别,因此必须移除该财产。

我刚刚修正了Chrome拒绝渲染网页字体的一个错误(它总是回退到非网页字体,没有理由我们可以辨别)。 最后 – 经过相当数量的头部划伤之后,通过设置来自optimizeLegibility (已经由Twitter Bootstrap设置,为了什么值得)的文本呈现来自动修复问题。

所以我现在会说,答案可能是“不”。 哪个不是说不要使用它,但不要把它应用到一切。 在需要的地方使用它,并仔细testing它的奇怪或意外的影响(特别是在Chrome!)。

使用“text-rendering:optimizelegibility”也会导致android原生浏览器(4.2&4.3)的渲染错误。 如果将此属性与通过@ font-face加载新字体结合使用,则字体将不会显示(仅后备)。 没有“text-rendering:optimizelegibility”和@ font-face字体加载并按预期显示。

CSS文本呈现看起来不稳定。 不要花时间在穷人的CSS财产,这可能是值得去与此…

如果Javascript是你的select,Kerning.js看起来很有希望,一个javascript方法来调整和字距对托pipe在Github上。

http://kerningjs.com

另外值得注意的是,如果你正在认真对待印刷术,有字体松鼠免费使用网页字体。

http://www.fontsquirrel.com