text-rendering

语法

/* Keyword values */
text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;

/* Global values */
text-rendering: inherit;
text-rendering: initial;
text-rendering: revert;
text-rendering: revert-layer;
text-rendering: unset;

值

auto

浏览器在绘制文本时会根据经验来猜测何时优化速度、易读性和几何精度。有关浏览器如何解释此值的差异，请参阅兼容性表格。

auto 值是平衡质量和性能的良好默认值，特别是对于大量纯文本。

optimizeSpeed

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

在资源受限的渲染场景（例如慢速处理器或低电量）中，optimizeSpeed 值更可取。

optimizeLegibility

浏览器强调易读性，而非渲染速度和几何精度。这会启用字距调整和可选连字。

optimizeLegibility 值更适合尺寸大但内容短的文本，例如标题或横幅，以提高其可读性。它也可以用于高质量的专业排版，例如已发布的文章。由于潜在的性能影响，不建议将其用于典型文章。

geometricPrecision

浏览器强调几何精度，而非渲染速度和易读性。字体的某些方面（例如字距调整）不会线性缩放。因此，此值可以使使用这些字体的文本看起来更好。

在 SVG 中，当文本放大或缩小时，浏览器会计算文本的最终大小（由指定的字体大小和应用的比例决定），并从平台的字体系统请求该计算大小的字体。但是，如果您请求字体大小为 9，比例为 140%，则生成的字体大小 12.6 在字体系统中不存在，因此浏览器会将字体大小四舍五入到 12。这会导致文本的阶梯式缩放。

但是，当渲染引擎完全支持 geometricPrecision 属性时，它允许您流畅地缩放文本。对于较大的比例因子，您可能会看到不太美观的文本渲染，但大小会符合您的预期——既不会向上舍入也不会向下舍入到 Windows 或 Linux 支持的最接近的字体大小。

geometricPrecision 值既不优化可读性也不优化性能。它通常在 SVG 中有意义，您希望图形忠实地缩放而不扭曲文本尺寸。

注意：WebKit 精确应用指定值，但 Gecko 将该值视为与 optimizeLegibility 相同。

正式定义

正式语法

text-rendering = 
  auto                |
  optimizeSpeed       |
  optimizeLegibility  |
  geometricPrecision  

示例

optimizeLegibility 的自动应用

这演示了当 font-size 小于 20px 时，浏览器如何自动使用 optimizeLegibility。

HTML

<p class="small">LYoWAT - ff fi fl ffl</p>
<p class="big">LYoWAT - ff fi fl ffl</p>

CSS

.small {
  font:
    19.9px "Constantia",
    "Times New Roman",
    "Georgia",
    "Palatino",
    serif;
}
.big {
  font:
    20px "Constantia",
    "Times New Roman",
    "Georgia",
    "Palatino",
    serif;
}

结果

optimizeSpeed vs. optimizeLegibility

此示例显示了 optimizeSpeed 和 optimizeLegibility 的外观差异（在您的浏览器中；其他浏览器可能会有所不同）。

HTML

<p class="speed">LYoWAT - ff fi fl ffl</p>
<p class="legibility">LYoWAT - ff fi fl ffl</p>

CSS

p {
  font:
    1.5em "Constantia",
    "Times New Roman",
    "Georgia",
    "Palatino",
    serif;
}

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

结果

规范

浏览器兼容性

另见

• 在 <canvas> 中绘制文本

• CSS 文本装饰 CSS 模块

• 相关 CSS 属性

  • text-decoration（及其长属性，例如 text-decoration-line、text-decoration-style 和 text-decoration-thickness）
  • text-emphasis（及其长属性，包括 text-emphasis-color、text-emphasis-position 和 text-emphasis-style）
  • text-shadow
  • text-transform

• SVG text-rendering 属性

• SVG 和 CSS