text-rendering

text-rendering 属性为渲染器提供有关在渲染文本时要进行哪些权衡的提示。

注意：作为表示属性，text-rendering 可用作 CSS 属性。有关更多信息，请参阅 CSS text-rendering 属性。

您可以将此属性与以下 SVG 元素一起使用

<text>

示例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 140 40" xmlns="http://www.w3.org/2000/svg">
  <text y="15" text-rendering="geometricPrecision">Geometric precision</text>
  <text y="35" text-rendering="optimizeLegibility">Optimized legibility</text>
</svg>

使用说明

值	`auto` \| `optimizeSpeed` \| `optimizeLegibility` \| `geometricPrecision`
默认值	`auto`
可动画	离散

auto: 此值表示用户代理应进行适当的权衡以平衡速度、清晰度和几何精度，但应优先考虑清晰度而不是速度和几何精度。
optimizeSpeed: 此值表示用户代理应优先考虑渲染速度而不是清晰度和几何精度。此选项有时会导致某些用户代理关闭文本抗锯齿。
optimizeLegibility: 此值表示用户代理应优先考虑清晰度而不是渲染速度和几何精度。用户代理通常会选择是否应用抗锯齿技术、内置字体提示或两者以生成最清晰的文本。
geometricPrecision: 此值表示用户代理应优先考虑几何精度而不是清晰度和渲染速度。此选项通常会导致用户代理暂停使用提示，以便字形轮廓以与路径数据的渲染相当的几何精度绘制。

规范

规范
可缩放矢量图形 (SVG) 2 # 文本渲染

浏览器兼容性

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

另请参阅

text-rendering