---
title: 文本渲染
slug: Web/CSS/text-rendering
tags:
  - CSS
  - SVG
  - zh-CN
translation_of: Web/CSS/text-rendering
---
<p>{{ CSSRef() }}</p>

<h2 id="概述">概述</h2>

<p><code>text-rendering</code> CSS 属性定义浏览器渲染引擎如何渲染字体。浏览器会在速度、清晰度、几何精度之间进行权衡。</p>

<div class="note">
<p>该属性是 SVG 的属性而不是标准的 CSS 属性。但是 Gecko（Firefox） 和 Webkit（Chrome、Safari） 内核的浏览器允许该属性在 Windows、Mac OS 和 Linux 操作系统中应用于 HTML 和 XML 内容。 </p>
</div>

<p>一个视觉上很明显的效果是，<code>optimizeLegibility 属性值会在某些字体（比如，微软的 Calibri，</code>Candara，Constantia 和 Corbel 或者 DejaVu 系列字体<code>）小于20px 时把有些相邻字符连接起来</code>（ligatures，比如，ff、fi、fl 等，效果见下面的 LiveExample) 。</p>

<p>{{cssinfo}}</p>

<h2 id="语法">语法</h2>

<pre class="brush: 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: unset;
</pre>

<h3 id="值">值</h3>

<dl>
 <dt><code>auto</code></dt>
 <dd>浏览器依照某些根据去推测在绘制文本时，何时该优化速度，易读性或者几何精度。对于该<font face="Consolas, Liberation Mono, Courier, monospace">值</font>在不同浏览器中解释的差异，请看兼容性表。</dd>
 <dt><code>optimizeSpeed</code></dt>
 <dd>浏览器在绘制文本时将着重考虑渲染速度，而不是易读性和几何精度. 它会使字间距和连字无效。</dd>
 <dt><code>optimizeLegibility</code></dt>
 <dd>浏览器在绘制文本时将着重考虑易读性，而不是渲染速度和几何精度.它会使字间距和连字有效。<strong>该属性值在移动设备上会造成比较明显的性能问题</strong>，详细查看<strong> </strong><a href="https://css-tricks.com/almanac/properties/t/text-rendering/">text-rendering</a>。</dd>
 <dt><code>geometricPrecision</code></dt>
 <dd>
 <p>浏览器在绘制文本时将着重考虑几何精度， 而不是渲染速度和易读性。字体的某些方面—比如字间距—不再线性缩放，所以该<font face="Consolas, Liberation Mono, Courier, monospace">值可以使使用某些字体的文本看起来不错。</font></p>

 <p>对于 SVG，当文本缩放时，浏览器会计算文本最终大小（取决于特定的字体大小和相应的缩放比例）并且从操作平台的字体系统中请求一个符合该计算值的字体大小。但如果你请求一个字体大小，比如 9 并且 140% 的缩放，这个最终的字体大小为 12.6，字体系统中明显不存在，所以浏览器会向下取整到 12。这导致文本缩放是阶梯式的。</p>

 <p>但这个 geometricPrecision 特性——当被渲染引擎完全支持时——会使文本缩放是流畅的。对于大比例的缩放，你可能看到并不太漂亮的文本渲染，但这个字体大小是你期望的，而不是被 Windows 或 Linux 系统四舍五入或向下取整的字体大小。</p>

 <p class="note"><strong>提示</strong>: WebKit 准确地的实现了这个值, 但是 Gecko 把这个值按照 <code>optimizeLegibility 处理。</code></p>
 </dd>
</dl>

<h2 id="示例">示例</h2>

<pre class="brush:css">/* make sure all fonts in the HTML document display in all its glory,
   but avoid inadequate ligatures in class foo elements */

body  { text-rendering: optimizeLegibility; }
.foo  { text-rendering: optimizeSpeed; }</pre>

<h4 id="Live_Example">Live Example</h4>

<div class="note">
<p>没有在 Chrome 中看出例子中的区别来，可以移步看看这篇文章 <a href="https://css-tricks.com/almanac/properties/t/text-rendering/">text-rendering</a>。</p>
</div>

<table class="standard-table">
 <tbody>
  <tr>
   <th>CSS code</th>
   <th>Kerning</th>
   <th>Ligatures</th>
  </tr>
  <tr style="font: 19.9px 'DejaVu Serif',Constantia;">
   <td style="font: medium monospace;">font: 19.9px 'DejaVu Serif',Constantia;</td>
   <td>LYoWAT</td>
   <td>ff fi fl ffl</td>
  </tr>
  <tr style="font: 20px 'DejaVu Serif',Constantia;">
   <td style="font: medium monospace;">font: 20px 'DejaVu Serif',Constantia;</td>
   <td>LYoWAT</td>
   <td>ff fi fl ffl</td>
  </tr>
  <tr style="font: 3em 'DejaVu Serif',Constantia; text-rendering: optimizeSpeed;">
   <td style="font: medium monospace;">font: 3em 'DejaVu Serif',Constantia;<br>
    text-rendering: optimizeSpeed;</td>
   <td>LYoWAT</td>
   <td>ff fi fl ffl</td>
  </tr>
  <tr style="font: 3em 'Dejavu Serif',Constantia; text-rendering: optimizeLegibility;">
   <td style="font: medium monospace;">font: 3em 'Dejavu Serif',Constantia;<br>
    text-rendering: optimizeLegibility;</td>
   <td>LYoWAT</td>
   <td>ff fi fl ffl</td>
  </tr>
 </tbody>
</table>

<h3 id="Gecko_注释">Gecko 注释</h3>

<p>auto 选项的 20px 字体大小的阈值可以被 <code>browser.display.auto_quality_min_font_size</code> 值改变.</p>

<p><code>optimizeSpeed</code> 选项在 Gecko 2.0 {{ geckoRelease("2.0") }} 上已经没有效果了，因为标准的文字渲染代码已经非常快，而且目前还没有更快的渲染方法。详见 {{ bug(595688) }} .</p>

<h2 id="说明文档">说明文档</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('SVG1.1', 'painting.html#TextRenderingProperty', 'text-rendering') }}</td>
   <td>{{ Spec2('SVG1.1') }}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<div class="note">
<p>该属性是 SVG 的属性而不是标准的 CSS 属性。但是 Gecko（Firefox） 和 Webkit（Chrome、Safari） 内核的浏览器允许该属性在 Windows、Mac OS 和 Linux 操作系统中应用于 HTML 和 XML 内容。 </p>
</div>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support for Windows and Linux</td>
   <td>
    <p>4.0 but the implementation known bugs on Windows and Linux which can break <a href="http://crbug.com/114719" title="http://crbug.com/114719">font substitition</a>, <a href="http://crbug.com/51973" title="http://crbug.com/51973">small-caps</a>, <a href="http://crbug.com/55458">letter-spacing</a> or cause <a href="http://crbug.com/149548">text to overlap</a></p>
   </td>
   <td><strong>3.0</strong> (1.9)</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>5.0 (532.5)</td>
  </tr>
  <tr>
   <td>Basic support for other operating systems</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
  </tr>
  <tr>
   <td><code>auto</code></td>
   <td>Chrome treats this as <code>optimizeSpeed</code>.<br>
    Work is continuing on{{ Webkitbug("41363") }}</td>
   <td>If the font size is 20 px or higher, Gecko browsers use <code>optimizeLegibility</code>; for smaller text, they use <code>optimizeSpeed</code>.</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>Safari treats this as <code>optimizeSpeed</code>.<br>
    Work is continuing on{{ Webkitbug("41363") }}</td>
  </tr>
  <tr>
   <td><code>geometricPrecision</code></td>
   <td>13 supports true geometric precision, without rounding up or down to the nearest supported font size in the operating system.<br>
    Introduced in WebKit 535.1   {{ Webkitbug("60317") }}</td>
   <td>Gecko treats the value the same as <code>optimizeLegibility</code>.</td>
   <td> {{ CompatNo() }}</td>
   <td> {{ CompatNo() }}</td>
   <td> </td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>