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

我在css中阅读了一篇关于文本渲染的 article.

据该博客称：

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之外,每个浏览器都支持这个属性,所以Just Simply 81.0%的世界将使用它没有问题.这就是为什么我要问这个问题,以便清楚理解这些概念.

解决方法

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).每个OS可能具有不同的实现. 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?

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

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

我认为这种说法可能过于乐观.此外,不要打折Internet Explorer,由于其紧密的硬件集成,它经常使文本呈现得非常好.