html - css 中的文本渲染，它是什么？以及如何使用它？

Question

我正在阅读 article关于 text-rendering in css.

根据该博客:

The text-rendering property in CSS allows you to choose quality of text over speed (or vice versa) allowing you to fine tune optimization by suggesting to the browser as to how it should render text on the screen. It 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.

它现在对于优化目的也很有用，可以减少页面加载时间，正如那里提到的那样。但是在阅读那篇文章时有些术语让我感到困惑，我认为这里的专家会详细说明这些术语以便更好地理解。所以这里是那些条款:

• 渲染是什么意思？它是如何完成的(关于 CSS)？

• 什么是易读性？

• 有人可以区分 optimizeLegibility 和 optimizeSpeed 吗？应该如何以及在何处使用它们中的每一个或两者？

此外，除了 IE，每个浏览器都支持此属性，所以很简单 81.0%的世界将没有问题使用它。这就是为什么我问这个问题是为了澄清对这些概念的理解。

Answer 1

What is meant by rendering? how it is done (with regard to CSS)?

我会说“渲染”大致等于接受关于应该是什么的指令并将其具体化为有形的东西(在这种情况下，显示器上的像素)。

“渲染”encompasses much more than text在谈论网络浏览器时。渲染涉及许多组件和阶段。

文本渲染会影响布局(宽度、高度、换行等)并影响绘制(“绘制这些像素和/或此字符串”)。

什么渲染文本？

这是来自 IE 团队的一段有趣的引述，解释了在 IE9+ 中该过程是如何完成的:

In addition to superior text positioning, Internet Explorer 9 also features hardware-accelerated text. The job of rendering both text and graphics has been pushed off of the central processing unit (CPU) and onto the graphics processing unit (GPU). This is accomplished using both DirectWrite and Direct2D—part of the DirectX families of APIs—which enable Internet Explorer 9 to use the underlying hardware through Windows.

Source

这是大多数(所有？)浏览器的共同主题:它们将文本渲染的最后阶段移交给更靠近设备本身的底层。

例如，Webkit 使用 GraphicContext与操作系统对话的抽象。 (Excellent talk on rendering in WebKit)。每个操作系统可能有不同的实现。 And each port of WebKit may be different .

这并不意味着渲染引擎无法为其下方的层提供详细的提示/说明。这确实意味着结果会因硬件、操作系统、浏览器和字体而异。

易读性

What is Legibility?

“清晰易读的质量”( Source ) 或“易读性是文本中的字形(单个字符)根据外观可理解或可识别的程度。” ( Source )

这与 optimizeLegibility 的描述一致:

The browser emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures.

换句话说，浏览器(通过渲染引擎)可能会采取额外的步骤以更易于阅读和/或更美观的方式显示文本。

它可能会使用额外的 ligature字体中包含的信息，它可能会调整字母之间的间距 ( kerning )。

差异

Can anyone please differ in between optimizeLegibility and optimizeSpeed?

质量(易读性)与数量(速度，即在给定时间段内呈现的字符数)。

optimizeSpeed: The browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures.

optimizeLegibility: The browser emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures.

Source

How and where each of them or both should be used?

只应使用其中一个(如果有的话)。就个人而言，我只会指定 text-rendering在看到它产生了积极影响之后，并且在所有设备上都表现良好(这是一项艰巨的任务)。

Also except IE every browser supports this property, So Simply 81.0% of world will have no problem using it.

我认为这种说法可能过于乐观了。另外，不要低估 Internet Explorer，由于其紧密的硬件集成，它通常可以非常好地呈现文本。