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 而不是动态确定。
嘿,Chris,
我不确定,因为我的英语很生疏,但我认为你的第一句话中缺了一个词(或两个词)。
无论如何,一如既往的好东西!
他是对的,你知道的
好文章 - 特别是关于其性能的说明。我更喜欢将其用于杂志风格布局中的摘录和标题。
感谢修正。
如果你不喜欢连字,可以使用
font-variant-ligatures: none
或font-feature-settings: none
属性来禁用它们。但是 CSS 连字很有趣 [es-es]
只是想指出,optimizeLegibility 在 Safari 5.1.7 for Windows 中渲染空段落。文本仍然存在于 DOM 中,只是没有显示(段落完全折叠)。字体是 Open Sans。
嗨,Adam,
我也遇到了同样的问题,你能告诉我你是怎么解决的吗?
提前感谢。
Nitesh Mittal“
我用 Helvetica Nue 字体组合遇到了这个问题。所以在将值更改为 auto 后,文本在 Safari 浏览器中显示良好。
因此,此 CSS 属性对某些字体不起作用。这就是为什么我们应该始终在不同的浏览器和设备上测试我们的网站。:)
感谢 @Adam!
仅供参考:这在 Android 4.3(可能还有 4.2?)中已损坏,因此你可能需要使用某种 User Agent Sniffing 来解决这个问题。
我用来做博客的字体有非常好的字距和连字,所以我很有信心使用以下方法(需要 Modernizr)。
仅针对触控设备优化速度。
html:not(.touch) 或者 .touch 的初始值会更好。