CSS font-size-adjust — розмір запасного шрифту
Властивість font-size-adjust дає кращий контроль розміру шрифту, коли перший обраний шрифт недоступний.
Розмір шрифту, який відображається залежить більшою мірою не від властивості font-size, яка визначає лише загальний розмір шрифту, а від співвідношення значень властивості font-size і величиниx-height (x-height - це різниця між розміром малої літери "x" і великої літери "X" для певного шрифту). Це співвідношення називається аспектом шрифту і розраховується за формулою: аспект = font-size / x-height.
Проблему розмірів вирішує властивість font-size-adjust (вона дозволяє змінювати аспект шрифту), яка змусить виглядати другий шрифт такого ж розміру, як і перший.
Загальний опис
автор: NagarD
Синтаксис
font-size-adjust: number|none|initial|inherit;Властивість font-size-adjust може отримувати 4 значень:
-
number -
Визначає значення аспекту для використання
автор: Svitlana -
none -
Не регулює розмір шрифту
автор: Svitlana -
initial -
Модифікує всі рядкові символи як заголовні зменшеного розміру
автор: Svitlana -
inherit -
Вказує на спадковість властивостей від свого батьківського елемента
автор: Svitlana
| Значення без задання: | none |
|---|---|
| Наслідує: | Так |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.fontSizeAdjust="0.58" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 127 | 3 | 16.4 | 113 | 127 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 127 | 127 | 4 | 16.4 |
Приклади
+ запропонувати свій приклад у пісочниці
Різні шрифти при однаковому font-size мають різну висоту малих літер, тому Times поруч із Verdana виглядає дрібнішим. У другому рядку font-size-adjust: 0.58 (аспект Verdana) підганяє малі літери обох шрифтів під одну висоту.
HTML
<p class="no">Без коригування: <span>Verdana</span> та <span class="t">Times New Roman</span></p>
<p class="yes">З font-size-adjust: <span>Verdana</span> та <span class="t">Times New Roman</span></p>CSS
p {
font-size: 22px;
}
span {
font-family: Verdana, sans-serif;
}
.t {
font-family: "Times New Roman", serif;
}
.yes span {
font-size-adjust: 0.58;
}Значення у дії
HTML
<p>Пропиши нове значення для властивості <code>font-size-adjust</code>:</p>
<input type="number" id="val" value="0.5" step="0.1" min="0">
<hr>
<div id="example">Це текст для прикладу. На нього не дії властивість <code>font-size-adjust</code> і має значення без задання: <em>none</em>.</div>
<div id="block">А цей блок, якраз і змінює поле вгорі. За допомогою цієї властивості ми змінюємо співвідношення сторін кожної літери.</div>CSS
* {
box-sizing: border-box;
padding: 0;
}
body {
font-family: sans-serif;
font-size: 25px;
line-height: 1.5;
color: #222;
}
p {
margin-top: 0;
}
#example,
#block {
padding: 10px;
}
#example {
background: #f1f1f1;
}
#block {
background: gold;
margin-top: 25px;
}JS
document.querySelectorAll('#val').forEach((el) => el.addEventListener('change', function () {
document.querySelectorAll('#block').forEach((n) => n.style.setProperty('font-size-adjust', this.value));
}));Приклад використання
HTML
<div class="block">
<div class="block1">
<pre> font-family: Verdana;
font-size: 15px;
font-size-adjust: 0.55;</pre>
<p id="para1">This is Verdana</p></div>
<div class="block1">
<pre> font-family: Times New Roman;
font-size: 15px;
font-size-adjust: 0.55;</pre>
<p id="para2">This is Times New Roman.</p>
</div>
</div>CSS
.block{
display: flex;
}
.block1{
margin-right: 30px;
}
pre{
font-size: 18px;
padding: 10px;
background: lightgrey;
}
#para1 {
font-family: Verdana;
font-size: 20px;
font-size-adjust: 0.55;
text-align: center;
}
#para2 {
text-align: center;
font-family: Times New Roman;
font-size: 20px;
font-size-adjust: 0.55;
}Усім трьом рядкам задано font-size: 20px. Times виглядає дрібнішим за Verdana, бо в нього нижчі малі літери; font-size-adjust: 0.545 підганяє його під аспект Verdana. У старих браузерах третій рядок збіжиться з другим.
HTML
<p class="a">Verdana — висота малих літер x</p>
<p class="b">Times New Roman — той самий font-size</p>
<p class="b fix">Times New Roman + font-size-adjust: 0.545</p>CSS
p {
margin: 0 0 10px;
font-size: 20px;
}
.a {
font-family: Verdana, sans-serif;
}
.b {
font-family: "Times New Roman", serif;
}
.fix {
font-size-adjust: 0.545;
}Приклад використання
HTML
<p>Без задання.</p>
<p class="adjust">С використанням властивості.</p>
<div class="not">Якщо Ви не бачите різниці, спробуйте браузер Firefox.</div>CSS
p {
font: 18px Verdana, Helvetica, sans-serif;
}
.adjust {
font-size-adjust: 0.75;
}
.not {
margin-top: 50px;
padding: 16px 6px;
background-color: #f1f1f1;
font-family: monospace;
font-size: 16px;
}Коментарі
Коментарів ще немає — будьте першим!