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
|
---
title: letter-spacing
slug: Web/CSS/letter-spacing
tags:
- CSS
- SVG
- 参考文档
translation_of: Web/CSS/letter-spacing
---
<div>{{CSSRef}}</div>
<p><code>CSS</code> 的 <code>letter-spacing</code> 属性用于设置文本字符的间距表现。</p>
<div>{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}</div>
<h2 id="语法">语法</h2>
<pre class="brush:css">/* Keyword value */
letter-spacing: normal;
/* <length> values */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;
/* Global values */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;
</pre>
<h3 id="值">值</h3>
<dl>
<dt><code>normal</code></dt>
<dd>此间距是按照当前字体的正常间距确定的。和 <code>0</code> 不同的是，{{glossary("user agent", "用户代理")}}根据此属性来确定文字的默认对齐方式。</dd>
<dt>{{cssxref("<length>")}}</dt>
<dd>指定文字间的间距以替代默认间距。可以是负值，但有可能会出现 implementation 限制。用户代理不会在此基础上进一步增加或缩减间距来对齐文字。</dd>
</dl>
<h3 id="形式语法">形式语法</h3>
{{csssyntax}}
<h2 id="示例">示例</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p class="normal">letter spacing</p>
<p class="em-wide">letter spacing</p>
<p class="em-wider">letter spacing</p>
<p class="em-tight">letter spacing</p>
<p class="px-wide">letter spacing</p>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">.normal { letter-spacing: normal; }
.em-wide { letter-spacing: 0.4em; }
.em-wider { letter-spacing: 1em; }
.em-tight { letter-spacing: -0.05em; }
.px-wide { letter-spacing: 6px; }
</pre>
<h3 id="结果">结果</h3>
<p>{{ EmbedLiveSample('Examples', 440, 185) }}</p>
<h2 id="可解决的问题">可解决的问题</h2>
<p>一个很大的正或负的 <code>letter-spacing</code>值会将应用这个样式的单词变为不可读的。给文本 <code>letter-spacing</code> 属性应用了一个很大的正值，字母之间的距离会很远，以至于文本中的单词将显示为一系列单独的，无有任何关联的字母。给文本 <code>letter-spacing</code> 属性应用了一个很大的负值，字母将会互相重叠到一个点，在这个点上单词可能无法识别了。</p>
<p>最佳的易辨认的字母间距（letter-spacing）必须根据具体情况来确定，因为不同的字体系列具有不同的字符宽度。没有任何一个值可以确保所有字体系列自动保持它们的可读性。</p>
<h2 id="可访问性考量">可访问性考量</h2>
<p>A large positive or negative <code>letter-spacing</code> value will make the word(s) the styling is applied to unreadable. For text styled with a very large positive value, the letters will be so far apart that the word(s) will appear like a series of individual, unconnected letters. For text styled with a very large negative value, the letters will overlap each other to the point where the word(s) may be unrecognizable.</p>
<p>Legible letter-spacing must be determined on a case-by-case basis, as different font families have different character widths. There is no one value that can ensure all font families automatically maintain their legibility.</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</a></li>
</ul>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Text', '#letter-spacing-property', 'letter-spacing')}}</td>
<td>{{Spec2('CSS3 Text')}}</td>
<td>没有变化</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'letter-spacing')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>定义可动的间距</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>没有变化</td>
</tr>
<tr>
<td>{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}</td>
<td>{{Spec2('SVG1.1')}}</td>
<td>初始化 SVG</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Initial specification</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("css.properties.letter-spacing")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li>{{cssxref("font-kerning")}}</li>
</ul>
|
