1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
|
---
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">font substitition</a>, <a href="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>
|
