text-rendering

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 的免费积分!

CSS 中的 text-rendering 属性允许您选择文本质量优先于速度(反之亦然),从而让您能够通过向浏览器建议如何在屏幕上渲染文本的方式来微调优化。 换句话说 在 MDN 中

text-rendering CSS 属性向渲染引擎提供有关渲染文本时要优化什么的信息。 浏览器会在速度、可读性和几何精度之间权衡利弊。

您可以看到一些之前/之后 示例。 有时结果仅仅是字距更好了

text-rendering 属性 **未在任何 CSS 标准中定义**。 它实际上是 一个 SVG 属性。 但是,Gecko/WebKit/Blink 浏览器允许您将此属性应用于 HTML 元素。

请注意,Windows、Linux 和 OS X 各自(可能)具有不同的文本渲染引擎。 更不用说不同的浏览器各自都有自己的文本渲染默认值,因此不能保证您的字体处理方式会按预期显示在用户的系统上。 您可以在 Typekit 博客 上了解更多关于类型渲染系统和操作系统的知识。

有四种可能的值

  • auto(默认)– 浏览器在绘制文本时会对何时优化速度、可读性和几何精度做出明智的猜测。 请注意,不同的浏览器对该值的解释不同。
  • optimizeSpeed – 浏览器在绘制文本时,会强调渲染速度而不是可读性和几何精度。 它会禁用字距和连字。
  • optimizeLegibility – 浏览器会强调可读性而不是渲染速度和几何精度。 这将启用某些字体中可能包含的用于特定字体的特殊字距和可选连字信息的使用。
  • geometricPrecision – 浏览器会强调几何精度而不是渲染速度和可读性。 字体的某些方面(例如字距)不会线性缩放,因此 geometricPrecision 可以使使用这些字体的文本看起来更好。 当 SVG 字体缩放时,浏览器会计算像素大小,然后四舍五入到最接近的整数。 geometricPrecision 属性允许进行更流畅的缩放。 注意:只有 WebKit 浏览器应用此流畅值,Gecko 将该值与 optimizeLegibility 一样对待。

< 20px 启用连字

对于某些字体(如 Calibri 或 DéjàVu),optimizeLegibility 关键字会启用小于 20px 的文本中的连字。 此 20px 阈值可以通过 Gecko 中的 browser.display.auto_quality_min_font_size 用户首选项更改。

连字是字母的组合,作为组合字形看起来更好,更易读。 例如字母“f”和“i”。 它们可以形成连字“fi”,如单词“find”中的“fi”。 您可以 在这里了解更多关于它们的信息.

一些字体文件包含有关如何渲染字体的附加信息。 optimizeLegibility 会利用此信息,而 optimizeSpeed 则不会。

示例

p.legibility {
  text-rendering: optimizeLegibility;
}
p.speed {
  text-rendering: optimizeSpeed;
}

性能

当有人说速度和精度之间存在权衡时,他们不是在开玩笑。 在 性能问题 方面需要考虑很多因素。 这篇文章值得完全引用

在移动设备上,当对长页面使用 optimizeLegibility 时,实际上存在着重大,实际上是致命的性能问题(例如 30 秒的加载延迟或更长)。 仅在您知道最大文本长度的情况下才使用它。 (另外,避免将其用于 Android 客户端,至少在每个人仍在使用的旧版本中:当启用此模式时,其字体渲染器通常有非常奇怪的错误。)

我使用 Instapaper 进行了一些测试,以确定 optimizeLegibility 性能的大致限制。 例如,在 iOS 上的 Instapaper 中,一篇 5,000 字的文章只会对具有 A5 级或更高 CPU 的设备使用 optimizeLegibility。 为了避免在旧的 iOS 设备上出现问题,我不建议您在任何超过 1,000 字的页面上盲目且无条件地使用 optimizeLegibility。 我不建议在 Android 上启用它。

这样做很诱人

/* Probably not advisable */
body {
  text-rendering: optimizeLegibility;
}

但要非常小心,这似乎很危险,尤其是在应用于任意页面时。

浏览器支持

Chrome Safari Firefox Opera IE Android iOS
4+ 5+ 3+ 也许是后 Blink? 2.3+? 3+?

存在各种错误。 Android 中存在换行符问题。 Chrome 中也存在各种问题,包括字母间距。 Safari(和其他浏览器)默认情况下使用 optimizeSpeed 而不是动态确定。