From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/letter-spacing/index.html | 129 +++++++++++++++++++++++++++++ 1 file changed, 129 insertions(+) create mode 100644 files/ru/web/css/letter-spacing/index.html (limited to 'files/ru/web/css/letter-spacing') diff --git a/files/ru/web/css/letter-spacing/index.html b/files/ru/web/css/letter-spacing/index.html new file mode 100644 index 0000000000..950325c331 --- /dev/null +++ b/files/ru/web/css/letter-spacing/index.html @@ -0,0 +1,129 @@ +--- +title: letter-spacing +slug: Web/CSS/letter-spacing +translation_of: Web/CSS/letter-spacing +--- +
{{CSSRef}}
+ +

Свойство letter-spacing определяет межбуквенное расстояние в тексте.

+ +
{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}
+ + + +

Синтаксис

+ +
/* Значения - ключевые слова */
+letter-spacing: normal;
+
+/* Значения <length> */
+letter-spacing: 0.3em;
+letter-spacing: 3px;
+letter-spacing: .3px;
+
+/* Глобальные значения */
+letter-spacing: inherit;
+letter-spacing: initial;
+letter-spacing: unset;
+
+ +

Значения

+ +
+
normal
+
Стандартное межбуквенное расстояние для текущего шрифта. В отличие от значения 0, это ключевое слово позволяет {{glossary("User Agent", "агенту пользователя")}} изменить расстояние между буквами для выравнивания текста.
+
{{cssxref("<length>")}}
+
Определяет дополнительное расстояние между буквами добавляющееся к стандартному расстоянию между символами. Значение может быть отрицательным, но при этом могут быть ограничения, зависящие от конкретной реализации. Агент пользователя может не увеличивать или уменьшать межбуквенное расстояние для выравнивания текста.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

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>
+
+ +

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; }
+
+ +

Результат

+ +

{{ EmbedLiveSample('Примеры', 440, 185) }}

+ +

Проблемы доступности

+ +

Большие положительные или отрицательные значения свойства letter-spacing могут сделать текст, к которому применяется форматирование, нечитаемым. При очень больших положительных значениях этого свойтва, буквы в тексте будут настолько далеко друг от друга, что не будут восприниматься как цельные слова. При очень больших отрицательных значениях буквы будут перекрываться друг другом до такой степени, что слова могут стать неразличимы.

+ +

Межбуквенное расстояние должно быть определено индивидуально для каждого случая, так как в разных семействах шрифтов ширина символов различна. Нет какого-то универсального значения, которое может быть применено для наилучшего отображения во всех семействах шрифтов.

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Text', '#letter-spacing-property', 'letter-spacing')}}{{Spec2('CSS3 Text')}}Без изменений.
{{SpecName('CSS3 Transitions', '#animatable-css', 'letter-spacing')}}{{Spec2('CSS3 Transitions')}}Определяет letter-spacing как доступное к анимированию.
{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}{{Spec2('CSS2.1')}}Без изменений.
{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}{{Spec2('SVG1.1')}}Первоначальное определение в SVG.
{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}{{Spec2('CSS1')}}Первоначальное определение.
+ +

{{cssinfo}}

+ +

Браузерная совместимость

+ + + +

{{Compat("css.properties.letter-spacing")}}

+ +

Смотрите также

+ + -- cgit v1.2.3-54-g00ecf