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