text-rendering

**text-rendering** CSS 属性向渲染引擎提供有关渲染文本时要优化的内容的信息。

浏览器在速度、清晰度和几何精度之间进行权衡。

注意：text-rendering 属性是 SVG 属性，未在任何 CSS 标准中定义。但是，Gecko 和 WebKit 浏览器允许您将此属性应用于 Windows、macOS 和 Linux 上的 HTML 和 XML 内容。

一个非常明显的效应是 optimizeLegibility，它为某些字体（例如 Microsoft 的Calibri、Candara、Constantia 和Corbel，或DejaVu 字体系列）中小于 20px 的文本启用连字（ff、fi、fl 等）。

语法

css
/* 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;

Values

auto

浏览器在绘制文本时会根据情况智能地选择是否优化速度、清晰度和几何精度。有关浏览器对该值解释差异，请参阅兼容性表格。

optimizeSpeed

浏览器在绘制文本时，优先考虑渲染速度而不是清晰度和几何精度。它会禁用字距调整和连字。

optimizeLegibility

浏览器优先考虑清晰度而不是渲染速度和几何精度。这将启用字距调整和可选连字。

geometricPrecision

浏览器优先考虑几何精度而不是渲染速度和清晰度。字体的某些方面（例如字距调整）不会线性缩放。因此，此值可以使使用这些字体的文本看起来不错。

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

但是，geometricPrecision 属性（当渲染引擎完全支持时）允许您流畅地缩放文本。对于较大的缩放因子，您可能会看到文本渲染效果不佳，但大小是您期望的——既不会向上舍入也不会向下舍入到 Windows 或 Linux 支持的最近的字体大小。

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

正式定义

初始值auto
应用于文本元素
继承是
计算值按指定
动画类型离散

正式语法

text-rendering = 
  auto                |
  optimizeSpeed       |
  optimizeLegibility  |
  geometricPrecision

示例

自动应用 optimizeLegibility

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

HTML

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

CSS

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

结果

optimizeSpeed 与 optimizeLegibility 的对比

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

HTML

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

CSS

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

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

结果

规范

规范
可缩放矢量图形 (SVG) 2
# TextRenderingProperty

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅