在此页

• 句法
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

text-rendering CSS property provides information to the rendering engine about what to optimize for when rendering text.

The browser makes trade-offs among speed, legibility, and geometric precision.

/* Keyword values */
text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
/* Global values */
text-rendering: inherit;
text-rendering: initial;
text-rendering: unset;
					

注意： text-rendering property is an SVG property that is not defined in any CSS standard. However, Gecko and WebKit browsers let you apply this property to HTML and XML content on Windows, macOS, and Linux.

One very visible effect is optimizeLegibility , which enables ligatures (ff, fi, fl, etc.) in text smaller than 20px for some fonts (for example, Microsoft's Calibri , Candara , Constantia ，和 Corbel ，或 DejaVu font family).

句法

值

auto

The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text. For differences in how this value is interpreted by the browser, see the compatibility table.

optimizeSpeed

The browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures.

optimizeLegibility

The browser emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures.

geometricPrecision

The browser emphasizes geometric precision over rendering speed and legibility. Certain aspects of fonts — such as kerning — don't scale linearly. So this value can make text using those fonts look good.

In SVG, when text is scaled up or down, browsers calculate the final size of the text (which is determined by the specified font size and the applied scale) and request a font of that computed size from the platform's font system. But if you request a font size of, say, 9 with a scale of 140%, the resulting font size of 12.6 doesn't explicitly exist in the font system, so the browser rounds the font size to 12 instead. This results in stair-step scaling of text.

But the geometricPrecision property — when fully supported by the rendering engine — lets you scale your text fluidly. For large scale factors, you might see less-than-beautiful text rendering, but the size is what you would expect—neither rounded up nor down to the nearest font size supported by Windows or Linux.

注意 : WebKit precisely applies the specified value, but Gecko treats the value the same as optimizeLegibility .

形式定义

初始值	auto
适用于	text elements
继承	yes
计算值	如指定
动画类型	discrete

形式句法

auto | optimizeSpeed | optimizeLegibility | geometricPrecision
					

范例

Automatic application of optimizeLegibility

This demonstrates how optimizeLegibility is used by browsers automatically when the font-size < 20px .

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

This example shows the difference between the appearance of optimizeSpeed and optimizeLegibility (in your browser; other browsers may vary).

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; }
					

结果

规范

规范	状态	注释
Scalable Vector Graphics (SVG) 2 The definition of 'text-rendering' in that specification.	候选推荐	No change
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'text-rendering' in that specification.	推荐	初始定义

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
text-rendering 非标	Chrome 完整支持 4 注意事项 完整支持 4 注意事项 注意事项 This property is only supported on Windows and Linux. 注意事项 Initial versions had bugs on Windows and Linux that broke font substitition , small-caps , letter-spacing or caused text to overlap .	Edge 完整支持 79 注意事项 完整支持 79 注意事项 注意事项 This property is only supported on Windows and Linux. 注意事项 Initial versions had bugs on Windows and Linux that broke font substitition , small-caps , letter-spacing or caused text to overlap .	Firefox 完整支持 1 注意事项 完整支持 1 注意事项 注意事项 This property is only supported on Windows and Linux. 注意事项 optimizeSpeed option has no effect on Firefox 4 because the standard code for text rendering is already fast and there is not a faster code path at this time. See bug 595688 了解细节。	IE 不支持 No	Opera 完整支持 15	Safari 完整支持 5	WebView Android 完整支持 3 注意事项 完整支持 3 注意事项 注意事项 From version 3 to 4.3, there is a serious bug where text-rendering: optimizeLegibility causes custom web fonts to not render. This was fixed in version 4.4.	Chrome Android 完整支持 18 注意事项 完整支持 18 注意事项 注意事项 This property is only supported on Windows and Linux. 注意事项 Initial versions had bugs on Windows and Linux that broke font substitition , small-caps , letter-spacing or caused text to overlap .	Firefox Android 完整支持 46	Opera Android 完整支持 14	Safari iOS 完整支持 4.2	Samsung Internet Android 完整支持 1.0 注意事项 完整支持 1.0 注意事项 注意事项 This property is only supported on Windows and Linux. Samsung Internet is not on Windows or Linux.
auto 非标	Chrome 完整支持 4 注意事项 完整支持 4 注意事项 注意事项 Chrome treats auto as optimizeSpeed .	Edge 完整支持 79 注意事项 完整支持 79 注意事项 注意事项 Edge treats auto as optimizeSpeed .	Firefox 完整支持 1 注意事项 完整支持 1 注意事项 注意事项 If the font size is 20 pixels or higher, Firefox treats auto as optimizeLegibility . For smaller text, Firefox treats auto as optimizeSpeed . The 20-pixel threshold can be changed with the browser.display.auto_quality_min_font_size preference.	IE 不支持 No	Opera 完整支持 15 注意事项 完整支持 15 注意事项 注意事项 Opera treats auto as optimizeSpeed .	Safari 完整支持 5 注意事项 完整支持 5 注意事项 注意事项 Safari treats auto as optimizeSpeed 。见 WebKit bug 41363 .	WebView Android 完整支持 ≤37 注意事项 完整支持 ≤37 注意事项 注意事项 WebView treats auto as optimizeSpeed .	Chrome Android 完整支持 18 注意事项 完整支持 18 注意事项 注意事项 Chrome treats auto as optimizeSpeed .	Firefox Android 完整支持 46 注意事项 完整支持 46 注意事项 注意事项 If the font size is 20 pixels or higher, Firefox treats auto as optimizeLegibility . For smaller text, Firefox treats auto as optimizeSpeed . The 20-pixel threshold can be changed with the browser.display.auto_quality_min_font_size preference.	Opera Android 完整支持 14 注意事项 完整支持 14 注意事项 注意事项 Opera treats auto as optimizeSpeed .	Safari iOS 完整支持 4.2 注意事项 完整支持 4.2 注意事项 注意事项 Safari treats auto as optimizeSpeed 。见 WebKit bug 41363 .	Samsung Internet Android 完整支持 1.0 注意事项 完整支持 1.0 注意事项 注意事项 Samsung Internet treats auto as optimizeSpeed .
geometricPrecision 非标	Chrome 完整支持 13 注意事项 完整支持 13 注意事项 注意事项 Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system.	Edge 完整支持 79 注意事项 完整支持 79 注意事项 注意事项 Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system.	Firefox 完整支持 1 注意事项 完整支持 1 注意事项 注意事项 Firefox treats geometricPrecision the same as optimizeLegibility .	IE 不支持 No	Opera 完整支持 15 注意事项 完整支持 15 注意事项 注意事项 Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system.	Safari 完整支持 6	WebView Android 完整支持 37 注意事项 完整支持 37 注意事项 注意事项 Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system.	Chrome Android 完整支持 18 注意事项 完整支持 18 注意事项 注意事项 Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system.	Firefox Android 完整支持 46 注意事项 完整支持 46 注意事项 注意事项 Firefox treats geometricPrecision the same as optimizeLegibility .	Opera Android 完整支持 14 注意事项 完整支持 14 注意事项 注意事项 Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system.	Safari iOS 完整支持 6	Samsung Internet Android 完整支持 1.0 注意事项 完整支持 1.0 注意事项 注意事项 Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system.

图例

完整支持

完整支持

不支持

不支持

非标。预期跨浏览器支持较差。

非标。预期跨浏览器支持较差。

见实现注意事项。

见实现注意事项。

另请参阅

• Drawing text in a <canvas>
• CSS Text Decoration CSS module
• Related CSS properties
  • text-decoration (and its longhand properties, such as text-decoration-line , text-decoration-style ，和 text-decoration-thickness )
  • text-emphasis (and its longhand properties, including text-emphasis-color , text-emphasis-position ，和 text-emphasis-style )
  • text-shadow
  • text-transform
• SVG text-rendering attribute
• SVG and CSS

元数据

• 最后修改： Aug 10, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS Miscellaneous
4. 特性

   1. all
   2. text-rendering