files/zh-cn/web/css/font-smooth/index.html


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

---
title: 字体平滑
slug: Web/CSS/font-smooth
tags:
  - CSS
  - CSS Reference
  - Non-standard
  - Reference
translation_of: Web/CSS/font-smooth
---
<div>{{ CSSRef }} {{ Non-standard_header }}</div>

<p><strong><code>font-smooth</code></strong> <a href="/zh-CN/CSS" title="CSS">CSS</a> 属性用来控制字体渲染时的平滑效果。</p>

<table class="properties">
 <tbody>
  <tr>
   <td><strong>{{ Xref_cssinitial() }}</strong></td>
   <td><code>auto</code></td>
  </tr>
  <tr>
   <td><strong>适用元素</strong></td>
   <td>所有元素与生成的内容</td>
  </tr>
  <tr>
   <td><strong>{{ Xref_cssinherited() }}</strong></td>
   <td>是</td>
  </tr>
  <tr>
   <td><strong>Percentages</strong></td>
   <td>relative to parent element's font size</td>
  </tr>
  <tr>
   <td><strong>Media</strong></td>
   <td>{{ Xref_cssvisual() }}</td>
  </tr>
  <tr>
   <td><strong>{{ Xref_csscomputed() }}</strong></td>
   <td>as specified</td>
  </tr>
 </tbody>
</table>

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

<pre class="brush:css">/* Keyword values */
font-smooth: auto;
font-smooth: never;
font-smooth: always;

/* &lt;length&gt; value */
font-smooth: 2em;
</pre>

<div class="note"><strong>Webkit</strong> 实现了名为<code>-webkit-font-smoothing</code>的相似属性。这个属性仅在 Mac OS X/macOS 下生效。

<ul>
 <li><code>none</code> - 关闭字体平滑；展示有锯齿边缘的文字。</li>
 <li><code>antialiased</code> - 平滑像素级别的字体，而不是子像素。从亚像素渲染切换到黑暗背景上的浅色文本的抗锯齿使其看起来更轻。</li>
 <li><code>subpixel-antialiased</code> - 在大多数非视网膜显示器上，这将会提供最清晰的文字。</li>
</ul>
</div>

<div class="note"><strong>Firefox</strong> 实现了名为 -moz-osx-font-smoothing 的相似属性。这个属性仅在 Mac OS X / macOS 下生效。

<ul>
 <li><code>auto</code> - 允许浏览器选择字体平滑的优化方式，通常为<code>grayscale</code>。</li>
 <li><code>grayscale</code> - 用灰度抗锯齿渲染文本，而不是子像素。从亚像素渲染切换到黑暗背景上的浅色文本的抗锯齿使其看起来更轻。</li>
 <li>{{cssxref("inherit")}}</li>
 <li>{{cssxref("unset")}}</li>
</ul>
</div>

<h2 id="规范">规范</h2>

<p>尽管在早期（2002）的 <a href="http://www.w3.org/TR/WD-font/#font-smooth">CSS3 Fonts</a> 草稿中就出现了 <code>font-smooth</code> ，但是这个属性已经在规范中被移除，而且已经不在标准跟踪之中。</p>

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

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>25.0<sup>[2]</sup></td>
   <td>5.0<sup>[1]</sup></td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>4.0<sup>[1]</sup></td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>iOS Safari</th>
   <th>Opera Mini</th>
   <th>Opera Mobile</th>
   <th>Android Browser</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>?<sup>[1]</sup></td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] <strong>Webkit</strong> 实现了名为<code>-webkit-font-smoothing</code>的相似属性。这个属性仅在 Mac OS X/macOS 下生效。</p>

<p>[2] <strong>Firefox</strong> 实现了名为 <code>-moz-osx-font-smoothing</code> 的相似属性。这个属性仅在 Mac OS X / macOS 下生效。</p>

<h2 id="参见">参见</h2>

<ul>
 <li><a href="http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/">Please Stop "Fixing" Font Smoothing – UsabilityPost</a></li>
</ul>