CSS font-kerning — кернінг шрифту
Властивість font-kerning використовується для зміни інтервалу між гліфами. На прикладі ми бачимо різницю між першим рядком, до якого застосовані властивості без задання, та другим, для якого ввімкнутий кернінг.
Кернінг - це типографічний термін, який стосується коректування простору між двома гліфами. Ці два символи називаються парами кернінга. Кернінг більш правильно налаштовує цей інтервал.Деякі символи можуть викликати проблеми з проміжками, які виявляються лише в парі з іншим потенційно проблемним глфіом. Пари з літерами, які найчастіше потребують кернінгу, як правило, являють собою комбінації символів верхнього та нижнього регістру, а також пари з пунктуацією. Зауважте, що викликає проблему не один символ, а пара символів.
У більшості шрифтів є вбудована таблиця кернінгу, в якій перераховуються певні пари гліфів та коригування інтервалу, які слід застосувати до них. Шрифт високої якості зазвичай постачається між 500 і 1000 пар кернінга, тому кернінг часто застосовується автоматично. Однак можуть бути випадки, коли ви не бажаєте, щоб кернінг застосовувався автоматично. Ви можете використовувати властивість font-kerning, щоб включити або вимкнути кернінг за необхідності.
Загальний опис
автор: NagarD
- Порада
-
Chrome до версії 33, Opera до версії 20 і Safari підтримують властивість
автор: Svitlana-webkit-font-kerning. - Нотатка
-
Властивість
автор: Svitlanafont-kerningне буде мати видимого ефекту при використанні шрифтів, які не підтримують кернінг гліфів.
Синтаксис
font-kerning: auto | normal | noneВластивість font-kerning може отримувати 3 значень:
-
auto -
Вказує, що кернінг застосовується на розсуд браузера.
автор: Svitlana -
normal -
Вказує, що застосовується кернінг.
автор: Svitlana -
none -
Вказує, що кернінг не застосовується.
автор: Svitlana
| Значення без задання: | auto |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.fontKerning = ''; |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 33 | 32 | 9 | 20 | 79 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4.3 | 33 | 32 | 9 |
Приклади
+ запропонувати свій приклад у пісочниці
Кернінг — індивідуальні відстані між парами літер (AV, WA, To). З none пари розсуваються на «сирі» відстані — порівняй ширину однакових рядків.
HTML
<p class="on">Кернінг увімкнено: AVATAR WAVE Tor</p>
<p class="off">Кернінг вимкнено: AVATAR WAVE Tor</p>CSS
p {
font-size: 28px;
font-family: Georgia, serif;
}
.on { font-kerning: normal; }
.off { font-kerning: none; }Чим кернінг відрізняється від letter-spacing: третій рядок розсунуто рівномірно, і діри в парах AV та To він не прибирає.
HTML
<p class="off">AV To LT WA</p>
<p class="on">AV To LT WA</p>
<p class="spaced">AV To LT WA</p>
<p class="note">1 — font-kerning: none · 2 — font-kerning: normal ·
3 — font-kerning: none + letter-spacing: 3px</p>CSS
body {
font-family: Georgia, "Times New Roman", serif;
padding: 20px;
}
.off,
.on,
.spaced {
font-size: 56px;
margin: 0 0 8px;
}
.off {
font-kerning: none;
}
.on {
font-kerning: normal;
}
.spaced {
font-kerning: none;
letter-spacing: 3px;
}
.note {
font-family: sans-serif;
font-size: 14px;
line-height: 1.5;
color: #566;
}Приклад використання
HTML
<div class="block1">
<p class="text">Власивість <code>font-kerning: none;</code></p>
<p class="no-kerning">AVAIL</p>
</div>
<div class="block">
<p class="text">Власивість <code>font-kerning: normal;</code></p>
<p class="kerning">AVAIL</p>
</div>CSS
body {
font-family: Lato;
font-size: 5em;
font-weight: 900;
}
p {
margin: 0;
text-align: center;
}
.no-kerning {
font-kerning: none;
}
.kerning {
font-kerning: normal;
color: orange;
}
.text{
font-size: 20px;
}
.block1{
margin-bottom: 30px;
}Коментарі
Коментарів ще немає — будьте першим!