Горизонтальные метрики шрифта
Нормативные ссылки
Синтаксис правил описания горизонтальных метрик описан в стандартах:
К горизонтальным метрикам шрифта относят свойства:
Кернинг
Прочтите:
- сведения о кернинге в разделе о горизонтальных метриках глифа;
- сведения о трекинге в стандарте CSS Fonts Module Level 4.
Свойство ‘font-kerning’ увеличивает или уменьшает горизонтальный интервал между парой соседних глифов (кернинг). Принимает следующие значения:
- ‘auto’ — браузер определяет, следует ли применять кернинг шрифта в конкретном случае. Например, браузер может отключить кернинг мелких шрифтов для улучшения читаемости.
- ’normal’ — интервал по умолчанию, сохранённый в метаданных шрифта;
- ’none’ — не применять значения кернинга, сохранённые в метаданных шрифта.
Свойство ‘font-kerning’:
- это текстовый тип данных, использующий ключевые слова;
- можно применять к элементам ‘::first-letter’ и ‘::first-line’.
Пример указания интервала по умолчанию (normal), а также дополнительного числового значения к интервалу, заданному текущим шрифтом:
div {
font-size: 2rem;
font-family: serif;
}
#no-kern {
font-kerning: none;
}
#kern {
font-kerning: normal;
}Трекинг
Прочтите:
- сведения о трекинге в разделе о горизонтальных метриках глифа;
- сведения о трекинге в стандарте CSS Text Module Level 4.
Свойство ’letter-spacing’ увеличивает или уменьшает горизонтальный интервал между глифами (трекинг). Принимает следующие значения:
- ’normal’ — интервал по умолчанию, естественный интервал шрифта;
- ’length’ — числовое значение.
Свойство ’letter-spacing’:
- это текстовый тип данных, использующий ключевые слова;
- можно применять к элементам ‘::first-letter’ и ‘::first-line’.
Пример указания интервала по умолчанию (normal), а также дополнительного числового значения к интервалу, заданному текущим шрифтом:
.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;
}Интервал между словами
Прочтите:
- сведения об интервале между словами в разделе о горизонтальных метриках глифа;
- сведения об интервале между словами в стандарте CSS Text Module Level 4.
Свойство ‘word-spacing’ увеличивает или уменьшает горизонтальный интервал между словами. Принимает следующие значения:
- ’normal’ — интервал по умолчанию, сохранённый в метаданных шрифта;
- ’length’ — числовое значение.
Свойство ‘word-spacing’ это текстовый тип данных, использующий ключевые слова.
Пример указания интервала по умолчанию (normal), а также дополнительного числового значения к интервалу, заданному текущим шрифтом:
#spacing1 {
word-spacing: 15px;
}
#spacing2 {
word-spacing: 5em;
}