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
|
---
title: letter-spacing
slug: Web/CSS/letter-spacing
translation_of: Web/CSS/letter-spacing
---
<div>{{CSSRef}}</div>
<p>Свойство <strong><code>letter-spacing</code></strong> определяет межбуквенное расстояние в тексте.</p>
<div>{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}</div>
<p class="hidden">Исходники для интерактивных примеров находятся в репозитории на GitHub. Если вы желаете поучаствовать в их улучшении, пожалуйста склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам pull-реквест.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="brush:css no-line-numbers">/* Значения - ключевые слова */
letter-spacing: normal;
/* Значения <length> */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;
/* Глобальные значения */
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>Определяет дополнительное расстояние между буквами <em>добавляющееся</em> к стандартному расстоянию между символами. Значение может быть отрицательным, но при этом могут быть ограничения, зависящие от конкретной реализации. Агент пользователя может не увеличивать или уменьшать межбуквенное расстояние для выравнивания текста.</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('Примеры', 440, 185) }}</p>
<h2 id="Проблемы_доступности">Проблемы доступности</h2>
<p>Большие положительные или отрицательные значения свойства <code>letter-spacing</code> могут сделать текст, к которому применяется форматирование, нечитаемым. При очень больших положительных значениях этого свойства, буквы в тексте будут настолько далеко друг от друга, что не будут восприниматься как цельные слова. При очень больших отрицательных значениях буквы будут перекрываться друг другом до такой степени, что слова могут стать неразличимы.</p>
<p>Межбуквенное расстояние должно быть определено индивидуально для каждого случая, так как в разных семействах шрифтов ширина символов различна. Нет какого-то универсального значения, которое может быть применено для наилучшего отображения во всех семействах шрифтов.</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">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</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>Определяет <code>letter-spacing</code> как доступное к анимированию.</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>Первоначальное определение.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Browser_compatibility">Браузерная совместимость</h2>
<p>{{Compat("css.properties.letter-spacing")}}</p>
<h2 id="See_also">Смотрите также</h2>
<ul>
<li>{{cssxref("font-kerning")}}</li>
</ul>
|
