text-rendering

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流瀏覽器均已支援。

text-rendering 屬性為渲染器提供了關於渲染文字時應權衡的提示。

注意： 作為演示屬性，text-rendering 還有一個對應的 CSS 屬性：text-rendering。當兩者都被指定時，CSS 屬性具有更高的優先順序。

你可以將此屬性與以下 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: 此值表示使用者代理應優先考慮幾何精度而不是可讀性和渲染速度。此選項通常會導致使用者代理暫停使用提示，以便字形輪廓以與路徑資料渲染相當的幾何精度繪製。

規範

規範
Scalable Vector Graphics (SVG) 2 # TextRenderingProperty

瀏覽器相容性

另見

CSS text-rendering 屬性

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025年3月18日⁩，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題