本文介绍了使用CSS规则“text-rendering:optimizelegibility;”是安全的。对所有文本?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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



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

解决方案

否:多年来在各种平台上出现了许多错误,显示或显示不正确(见下文)。如果你的目标是让连字,实际上是标准的物业 -variant-ligaturesrel =nofollow> CSS Fonts Level 3 提供完全控制:

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

请参阅,可以启用其他排版功能表单等。



历史



之前 font-variant-ligatures &相关性增加了,上了年纪的属性允许启用相同的功能。这是一个较低级别的接口,除了启用没有更高级别接口的OpenType功能之外,不再推荐。



有一个简单的例子:

  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;
}

还有更多的讨论。



Bug Gallery



流行的HTML5 Boilerplate项目在两年前因为各种渲染问题而被移除: p>



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



p>



请参阅了解其他一些问题。



突出显示了兼容性问题Android和一般性能问题


I noticed this woo theme for 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.

Have the rules changed now? Do browsers perform well with it?

解决方案

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-ligatures defined in CSS Fonts Level 3 which offers full control:

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

See font-variant for other typographic features which can be enabled such as small caps, alternate letter forms, etc.

History

Before font-variant-ligatures & the related properties were added, the older font-feature-settings property 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.

http://blog.fontdeck.com/post/15777165734/opentype-1 has a simple example:

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.

Bug Gallery

The popular HTML5 Boilerplate project removed it two years ago due to various rendering problems:

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:

http://code.google.com/p/chromium/issues/detail?id=114719

http://code.google.com/p/chromium/issues/detail?id=149548

See http://aestheticallyloyal.com/public/optimize-legibility/ for a few other concerns.

http://bocoup.com/weblog/text-rendering/ highlighted compatibility problems on Android and general performance issues

这篇关于使用CSS规则“text-rendering:optimizelegibility;”是安全的。对所有文本?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-23 08:44