当前位置： 文江博客话题详情

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

发布于 2024-12-13 06:33:46 字数 180 浏览 2 评论 0原文

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

现在规则改变了吗？浏览器对此表现良好吗？

原文

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?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（6）

初见你 2024-12-20 06:33:47

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

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

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

默认

浏览器会在绘制文本时对何时优化速度、易读性和几何精度进行有根据的猜测。

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

from the MDN text-rendering page, last updated on 18:27, 29 Apr 2012, it reads:

The text-rendering CSS property provides information to the rendering engine about what to optimize for when rendering text. The browser makes trade-offs among speed, legibility, and geometric precision. The text-rendering property is an SVG property that is not defined in any CSS standard. However, Gecko and WebKit browsers let you apply this property to HTML and XML content on Windows, Mac OS X and Linux.

which tels us that it is not defined in any CSS standard, thus leading to cross-browser issues, as seen on the Browser compatibility table.

By default

The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text.

So, is safe to assume that the best option is to let the browser take care of details like this, since this feature is not a standard (yet), and most browsers don't support it.

回复 原文
转瞬即逝 2024-12-20 06:33:47

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

必须删除该属性，因为我们的大多数最终用户都属于该类别。

text-rendering: optimizeLegibility; was used in one of our web apps. it rendered properly in all browsers, except one - chrome (64) on windows 7.

Had to remove the property as most of our end users were from that category.

回复 原文
梦萦几度 2024-12-20 06:33:47

我刚刚修复了 Chrome 拒绝渲染网络字体的错误（它总是退回到非网络字体，我们无法辨别原因）。最后，经过大量的绞尽脑汁之后，通过将文本渲染从 optimizeLegibility （已由 Twitter Bootstrap 设置，因为它的价值）设置为 auto 解决了问题。 /代码>。

所以我现在想说的答案可能是“不”。这并不是说不要使用它，而是不要将它应用于所有事情。在需要的地方使用它并仔细测试它是否有奇怪的或意外的效果（尤其是在 Chrome 中！）。

I've just fixed a bug where Chrome was refusing to render web fonts (it always fell back to a non-web one, for no reason we could discern). In the end - after considerable amount of head-scratching - the problem was fixed by setting text-rendering from optimizeLegibility (which had been set by Twitter Bootstrap, for what it's worth) to auto.

So I would say for the moment the answer is probably "no". Which isn't to say don't use it, but don't apply it to everything. Use it where needed and test it carefully for weirdnesses or unexpected effects (especially in Chrome!).

回复 原文
向日葵 2024-12-20 06:33:47

使用“text-rendering：optimizelegibility”也会导致android本机浏览器（4.2和4.3）中出现渲染错误。如果您将此属性与通过 @font-face 加载新字体结合使用，则该字体将根本不会显示（仅后备）。如果没有“text-rendering：optimizelegibility”和@font-face，字体将按预期加载并显示。

using "text-rendering: optimizelegibility" also causes rendering errors in android native browser (4.2 & 4.3). If you use this attribute in combination with loading new fonts via @font-face, the font will not display at all (only fallback). without "text-rendering: optimizelegibility" and @font-face the font loads and gets displayed as expected.

回复 原文
旧话新听 2024-12-20 06:33:47

CSS 文本渲染看起来不稳定。与其在糟糕的 CSS 属性上浪费时间，不如选择这个……

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

http://kerningjs.com

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

http://www.fontsquirrel.com

CSS text-rendering looks shaky. Instead of grinding time with a poor CSS property, it may be worthwhile to go with this...

If Javascript is an option for you, Kerning.js looks promising, a javascript approach to kerning and kerning pairs hosted on Github.

http://kerningjs.com

Also worth noting, if you are getting serious about typography, there is Font Squirrel free use web fonts.

http://www.fontsquirrel.com

回复 原文
少跟Wǒ拽 2024-12-20 06:33:46

否：多年来，各个平台上存在许多错误，导致文本无法显示或显示不正确（见下文）。如果您的目标是启用连字，则实际上有标准属性 < code>font-variant-ligatures 定义于 CSS 字体级别 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 和一般性能问题

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

回复 原文
~没有更多了~

关于作者

烧了回忆取暖

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

忆悲凉

文章 0 评论 0

hgfg1645

文章 0 评论 0

qq_qLPLYi

文章 0 评论 0

戏舞

文章 0 评论 0

殊姿

文章 0 评论 0

﹂绝世的画

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文