CSS font-variant-numeric — цифри, tabular-nums
Властивість font-variant-numeric дозволяє контролювати стиль відображення чисел на сторінці.
Властивість font-variant-numeric є однією із властивостей у CSS3, які використовуються для ввімкнення різних функцій, пов'язаних зі шрифтом та покращення зовнішнього вигляду тексту на сторінці. У даному випадку властивість застосовується для чисел.
Загальний опис
автор: NagarD
Синтаксис
font-variant-numeric: normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]Властивість font-variant-numeric може отримувати 6 значень:
-
normal -
Вказує, що жодна з наведених нижче функцій не активована.
автор: Svitlana -
ordinal -
Це ключове слово зумовлює використання спеціальних гліфів для порядкових маркерів.
автор: Svitlana -
slashed-zero -
Це ключове слово призводить до використання 0 (нуля) з косою рискою всередині символу (перекресленням).
автор: Svitlana -
<numeric-figure-values> -
lining-nums- дозволяє відображати звичайні цифри.
автор: Svitlanaoldstyle-nums- вмикає відображення старих цифр. -
<numeric-spacing-values> -
proportional-nums- дозволяє відображати пропорційні цифри.
автор: Svitlanatabular-nums- вмикає відображення табличних чисел. -
<numeric-fraction-values> -
diagonal-fractions- активізуює набір фігур, де чисельник і знаменник зменшені і розділені косою лінією.
автор: Svitlanastacked-fractions- активізує набір фігур, де чисельник і знаменник зменшені, та розділені горизонтальною лінією.
| Значення без задання: | normal |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.fontVariantNumeric |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 52 | 34 | 9.1 | 39 | 79 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 52 | 52 | 34 | 9.3 |
Приклади
+ запропонувати свій приклад у пісочниці
Цифрові можливості шрифту: tabular-nums робить усі цифри однакової ширини (111 і 888 вирівнюються), slashed-zero перекреслює нуль, щоб не плутати з O. Потрібна підтримка з боку шрифту.
HTML
<p class="prop">Пропорційні: 111 888</p>
<p class="tab">tabular-nums: 111 888</p>
<p class="zero">slashed-zero: 0 проти O</p>CSS
p {
font-size: 24px;
}
.tab {
font-variant-numeric: tabular-nums;
}
.zero {
font-variant-numeric: slashed-zero;
}Приклад використання
HTML
<table>
<tr>
<th />
<th style="font-family: 'Raleway'">Raleway</th>
<th style="font-family: 'Helvetica'">Helvetica</th>
<th style="font-family: 'Georgia'">Georgia</th>
</tr>
<tr class="oldstyle">
<td class="desc">Oldstyle</td>
<td style="font-family: 'Raleway'">1234567890</td>
<td style="font-family: 'Helvetica'">1234567890</td>
<td style="font-family: 'Georgia'">1234567890</td>
</tr>
<tr class="lining">
<td class="desc">Lining</td>
<td style="font-family: 'Raleway'">1234567890</td>
<td style="font-family: 'Helvetica'">1234567890</td>
<td style="font-family: 'Georgia'">1234567890</td>
</tr>
<tr class="tabular">
<td class="desc">Tabular</td>
<td style="font-family: 'Raleway'">1234567890</td>
<td style="font-family: 'Helvetica'">1234567890</td>
<td style="font-family: 'Georgia'">1234567890</td>
</tr>CSS
body {
font-family: "Raleway";
font-size: 1em;
line-height: 10%;
font-weight: 400;
}
.desc { font-size: 1rem; }
th, td { padding: 1em; }
table { margin: 2em auto; }
.oldstyle {
font-variant-numeric: oldstyle-nums;
font-feature-settings: 'onum';
/* vendor-prefixes */
-moz-font-feature-settings: 'onum=1';
-ms-font-feature-settings: 'onum';
-webkit-font-feature-settings: 'onum';
-o-font-feature-settings: 'onum';
}
.lining {
font-variant-numeric: lining-nums;
font-feature-settings: 'lnum';
/* vendor-prefixes */
-moz-font-feature-settings: 'lnum=1';
-ms-font-feature-settings: 'lnum';
-webkit-font-feature-settings: 'lnum';
-o-font-feature-settings: 'lnum';
}
.tabular {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum';
/* vendor-prefixes */
-moz-font-feature-settings: 'tnum=1';
-ms-font-feature-settings: 'tnum';
-webkit-font-feature-settings: 'tnum';
-o-font-feature-settings: 'tnum';
}
table, td{
border: 1px solid grey;
border-collapse: collapse;
}
th{
background: lightgrey;
}Значення у дії
HTML
<p>Цей приклад показує як працює властивість <code>font-variant-numeric</code>. Спробуйте вимкнути/ввімкнути перемикач, щоб змінити відображення цифр нижче. Зверніть увагу, що властивість може не підтримуватися Вашим браузером.</p>
<div class="inputs">
<input id="normal" checked name="font-variant-numeric" type="radio"/>
<label for="normal">normal</label>
<message for="normal">Без задання. Використовуються стандартні гліфи.</message>
<input id="slashed-zero" name="font-variant-numeric" type="radio"/>
<label for="slashed-zero">slashed-zero</label>
<message for="slashed-zero">Це ключове слово призводить до використання нуля з перекресленням.</message>
</div>
<p id="message">Без задання. Використовуються стандартні гліфи.</p>
<hr>
<p id="block"><span>0000</span></p>CSS
* {
box-sizing: border-box;
padding: 0;
}
body {
font-family: 'Helvetica';
}
#block {
font-size: 7em;
text-align: center;
}
message {
display: none;
}JS
const message = document.querySelector('#message');
document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {
var messageText = document.querySelector("message[for='" + this.id + "']");
message.textContent = messageText?.textContent ?? '';
document.querySelectorAll('#block').forEach((n) => n.style.setProperty('font-variant-numeric', this.id));
}));Приклад використання
HTML
<div>
Без задання: <span>1234567890</span>
</div>
<div class="oldstyle">
Старий стиль: <span>1234567890</span>
</div>CSS
body {
font-family: 'Helvetica';
font-size: 2em;
color: #444;
}
span {
color: #000;
font-weight: 700;
font-size: 2.4em;
}
.oldstyle {
font-variant-numeric: oldstyle-nums;
}Ліва колонка примусово використовує пропорційні цифри, права — табличні. У правій усі цифри однакової ширини, тож розряди стоять рівно один під одним. Якщо різниці не видно, обраний шрифт має лише один набір цифр — це очікувано.
HTML
<div class="col p">
<div>1 111,00</div>
<div>8 888,00</div>
<div>1 818,00</div>
</div>
<div class="col t">
<div>1 111,00</div>
<div>8 888,00</div>
<div>1 818,00</div>
</div>CSS
.col {
display: inline-block;
margin-right: 30px;
padding: 8px;
font-size: 22px;
background: #eef2f7;
}
.p {
font-variant-numeric: proportional-nums;
}
.t {
font-variant-numeric: tabular-nums;
}Коментарі
Коментарів ще немає — будьте першим!