使用CSS规则“text-rendering:optimizelegibility;”是安全的。对所有文本? [英] Is it safe to use the CSS rule "text-rendering: optimizelegibility;" on all text?

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

问题描述

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



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

解决方案

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

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

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



历史



之前 font-variant-ligatures &相关性增加了,上了年纪的 字体-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项目在两年前因为各种渲染问题而被移除: p>

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



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



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

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



请参阅 http://aestheticallyloyal.com/public/optimize-legibility/ 了解其他一些问题。



http://bocoup.com/weblog/text-rendering/ 突出显示了兼容性问题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;”是安全的。对所有文本?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆