CSS中的text-rendering是什么？如何使用它？

Question

我正在阅读一篇关于CSS中text-rendering属性的文章。根据该博客：

引用:

CSS中的text-rendering属性允许您在质量和速度之间选择，从而使您可以通过建议浏览器如何在屏幕上呈现文本来微调优化。它向渲染引擎提供有关呈现文本时要优化什么的信息。浏览器在速度、易读性和几何精度之间进行权衡。

如上所述，它现在对于优化页面加载时间非常有用。但是，在阅读该文章时，有些术语令我感到困惑，我认为这里的专家将详细解释这些术语以便更好地理解。那么这些术语是：

• 在CSS中，什么是“渲染”，如何进行渲染？

• 什么是易读性？

• 请问optimizeLegibility和optimizeSpeed之间有什么区别？应该在哪里和如何使用它们或两者都使用？

此外，除了IE之外，每个浏览器都支持此属性，因此全球约81.0%的人不会使用它有问题。这就是为什么我在这里提出这个问题，以便更清楚地理解这些概念。

- Vedant Terkar

Answer 1

我会很乐意为您翻译。以下是需要翻译的内容：

什么是渲染？关于 CSS，它是如何完成的？

我认为，“渲染”大致等同于将关于应该是什么的指令具体化成可见的东西（在这种情况下，是显示器上的像素）。

当谈到网络浏览器时，“渲染”远不止文本。有许多组件和阶段涉及到渲染。

文本渲染影响布局（宽度、高度、换行等），并影响绘画（“绘制这些像素和/或这个字符串”）。

什么渲染了文本？

这里有一句有趣的引用来自 IE 团队，解释了在 IE9+ 中该过程是如何完成的：

除了出色的文本定位之外，Internet Explorer 9 还具有硬件加速文本的功能。渲染文本和图形的工作已经从中央处理器 (CPU) 移到了图形处理器 (GPU) 上。这是通过使用 DirectWrite 和 Direct2D 实现的，它们是 DirectX API 系列的一部分，使 Internet Explorer 9 可以通过 Windows 使用底层硬件。来源 这是大多数浏览器的共同主题：它们将其文本渲染的最终阶段交给更接近设备本身的底层层面。

例如，Webkit 使用 GraphicContext 抽象来与操作系统进行通信。 (在 WebKit 中进行渲染的优秀演讲)。每个操作系统可能都有不同的实现。而且每个 WebKit 的端口可能都是不同的。 这并不意味着渲染引擎不能向其下方的层提供详细的提示/指令。这意味着结果会因硬件、操作系统、浏览器和字体而异。

易读性

什么是易读性？

"足够清晰以便阅读"(来源)或者"易读性是根据外观来理解或识别文本中字形(单个字符)的程度"(来源)。

这与optimizeLegibility的描述相符:

浏览器强调易读性而不是渲染速度和几何精度。这使得字距和可选连字成为可能。

换句话说，浏览器（通过渲染引擎）可能采取额外的步骤以更容易阅读和/或更具视觉吸引力的方式显示文本。

它可能使用字体中包含的额外ligature信息，并且可以调整字母之间的间距（kerning）。

区别

请问optimizeLegibility和optimizeSpeed有何不同？

质量（易读性）与数量（速度，即在给定时间内呈现的字符数）之间的差异。

optimizeSpeed：浏览器在绘制文本时强调渲染速度而不是易读性和几何精度。它会禁用字距和连字。

optimizeLegibility：浏览器注重易读性而不是渲染速度和几何精度。这将启用字距和可选连字。

来源

应该如何使用它们或两者都应该在哪里使用？

只需使用其中一个（如果需要）。个人而言，我会在确认text-rendering对所有设备都有积极影响并表现良好之后才指定它（这是一项艰巨的任务）。

除了IE，几乎所有浏览器都支持此属性，因此全球81.0％的用户没有使用它的问题。

我认为该说法可能过于乐观。此外，不要忽视Internet Explorer，由于其紧密的硬件集成，通常可以很好地呈现文本。

- Tim M.

---

+1 给你的详细回答，尤其是最后一句话。就我个人而言，我发现IE在呈现文本方面比其他浏览器更加稳定...除了可能是我的手机浏览器，但这可能是由于十亿像素屏幕或其他原因XD。 - Niet the Dark Absol

谢谢，伙计。非常好而且详细的回答。+1。 - Vedant Terkar