CSS font-size — розмір шрифту
Властивість font-size встановлює розмір шрифту. Розмір шрифту - це висота від базової лінії літери до її верхнього краю.
Ви можете вказати в якості значення абсолютний або відносний розмір, довжину або відсоток.
Ключові слова для задання абсолютного розміру зберігаються браузером в таблиці розмірів шрифтів. Коли ви використовуєте таке ключове слово, користувацький агент шукає таблицю і відповідно обчислює розмір шрифту.
Ключові слова для задання відносного розміру переміщають розмір шрифту за списком абсолютних розмірів шрифтів вище. Наприклад, якщо батьківський елемент має середовище, значення меншого за чинним елементом зробить його розмір шрифтом маленьким. Якщо розмір шрифту батька не збігається з абсолютним ключовим словом, користувацький агент обчислює його або шляхом вибору розміру між абсолютними значеннями ключових слів або округленням до найближчого.
Якщо розмір знаходиться за межами діапазону абсолютних значень ключових слів, користувальницький агент буде екстраполювати розмір відповідно.
Ось приблизне керівництво щодо відображення між абсолютними розмірами CSS, заголовком HTML та абсолютними розмірами шрифтів. Зверніть увагу, що фактичне значення може змінюватися в залежності від значення параметра font-size-adjust та недоступності певних розмірів шрифтів.
| Значення абсолютної величини CSS | xx-small | x-small | small | medium | large | x-large | xx-large | |
|---|---|---|---|---|---|---|---|---|
| Масштабний коефіцієнт | 3/5 | 3/4 | 8/9 | 1 | 6/5 | 3/2 | 2/1 | 3/1 |
| HTML-заголовки | h6 | h5 | h4 | h3 | h2 | h1 | ||
| Розміри шрифтів HTML | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
Також дозволяється використовувати будь-які допустимі одиниці CSS: em (висота шрифту елемента), ex (висота символу х), пункти (pt), пікселі (px), відсотки (%) і ін. За 100% береться розмір шрифту батьківського елементу. Негативні значення не допускаються.
Обмеження властивості font-size
Різні шрифти мають різні висоти. Таким чином, один шрифт може виглядати більшим за заданим розміром, ніж інший шрифт. Це добре, якщо ви маєте справу лише з одним шрифтом. Але ми, як правило, розглядаємо список шрифтів: шрифт першого вибору, а потім один або декілька "резервних" шрифтів, якщо користувач не має першого шрифту.
Зазвичай це виглядає приблизно так:
font-size: 16px;
font-family: "Open Sans", Verdana, sans-serif;
Припущення полягає в тому, що, як розробники, у нас буде встановлений перший вибір шрифту (Open Sans) на нашому комп'ютері. Тому, коли ми перевіряємо розмір шрифту на веб-сайті, ми будемо тестувати за допомогою шрифту першого вибору.
Але як щодо користувачів, які не можуть використовувати наш шрифт першого вибору? Вони отримають другий вибір (якщо він є доступним) або третій вибір, якщо ні одна з них не є доступною тощо.
У багатьох випадках шрифти другого або третього вибору будуть відображатися на іншій висоті, ніж шрифт першого вибору. Це означає, що ваш шрифт другого вибору може виглядати більшим або меншим, ніж передбачалося. У деяких випадках це може не бути проблемою, але в інших випадках ви можете виявити, що шрифт резервного копіювання видається занадто малим або набагато більшим - до того моменту, коли текст стає нечитабельним. Це може виявитися досить розчаровуючим, оскільки може бути важко знайти відповідні шрифти для резервування.
На щастя, CSS дає змогу вирішити цю проблему.
CSS має властивість font-size-adjust для вирішення цієї проблеми. В основному вона дозволяє вказати, щоб всі резервні шрифти використовували одне і те ж співвідношення сторін. Коли ви це зробите, резервний шрифт відображається у дуже близькому розмірі до потрібного шрифту.
Загальний опис
автор: NagarD
Синтаксис
font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;Властивість font-size може отримувати 13 значень:
-
medium -
Середній розмір шрифту. Без задання.
автор: Svitlana -
xx-small -
Шрифт екстра-екстра малого розміру.
автор: Svitlana -
x-small -
Шрифт екстра малого розміру.
автор: Svitlana -
small -
Шрифт малого розміру.
автор: Svitlana -
large -
Шрифт великого розміру.
автор: Svitlana -
x-large -
Шрифт екстра великого розміру.
автор: Svitlana -
xx-large -
Шрифт екстра-екстра великого розміру.
автор: Svitlana -
smaller -
Розмір шрифту трохи меньший, ніж у батьківського елемента.
автор: Svitlana -
larger -
Розмір шрифту трохи більший, ніж у батьківського елемента.
автор: Svitlana -
length -
Фіксований розмір шрифту в px, cm, etc
автор: Svitlana -
% -
Розмір шрифту у відсотках. Примітка: За 100% береться розмір шрифту батьківського елементу. Від'ємні значення не допускаються.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента.
автор: Svitlana
| Значення без задання: | medium |
|---|---|
| Наслідує: | Так |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.fontSize="14px" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 7 | 12 | 5.5 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Відсотки відлічуються від успадкованого розміру: заголовки збільшені відносно базового, абзац лишився один в один.
HTML
<h1>Заголовок на 250%</h1>
<h2>Заголовок на 200%</h2>
<p>Абзац на 100% — базовий розмір.</p>CSS
h1 {
font-size: 250%;
}
h2 {
font-size: 200%;
}
p {
font-size: 100%;
}Однакове значення 0.8 у вкладених списках: ліворуч в em розмір множиться на кожному рівні й тане, праворуч у rem лишається сталим.
HTML
<div class="col">
<p>em — множаться</p>
<ul class="em">
<li>рівень 1
<ul><li>рівень 2
<ul><li>рівень 3</li></ul>
</li></ul>
</li>
</ul>
</div>
<div class="col">
<p>rem — сталий</p>
<ul class="rem">
<li>рівень 1
<ul><li>рівень 2
<ul><li>рівень 3</li></ul>
</li></ul>
</li>
</ul>
</div>CSS
body { font-family: sans-serif; }
.col {
display: inline-block;
vertical-align: top;
width: 45%;
}
.col p {
font-size: 14px;
font-weight: bold;
color: #4a6fa5;
}
.em ul { font-size: 0.8em; }
.rem ul { font-size: 0.8rem; }
ul { margin: 0 0 0 18px; padding: 0; }Приклад використання
HTML
<p class="about">За допомогою властивості <strong>font-size</strong> ми можемо змінити розмір тексту. От наприклад, є п'ять абзаців:</p>
<p>Цей абзац використовує значення властивості <strong>font-size</strong> за замовчуванням (<em>medium</em>, і воно може різнитися між різними браузерами/ОС).</p>
<p class="px">А тут ми встановили розмір <em>25px</em>, тобто 25 пікселів.</p>
<p class="em">Для цього абзацу встановлене значення <em>1.25</em> - у 1.25 рази більший за розмір за замовчуванням або значення встановлене за допомогою <strong>font-size</strong> для батьківського елементу.</p>
<p class="per">А за допомогою відсотків (<em>175%</em>), ми встановлюємо розмір, відносно розміри тексту батьківського елементу або значення за замовчуванням, якщо спеціально <strong>font-size</strong> не прописувався (як і у минулому прикладі).</p>
<p class="rem"><em>1.7rem</em> - працює так само як і <em>em</em>, от тільки відносно корневого елемента (в більшості випадків - це <em>html</em>).</p>CSS
body {
line-height: 1.45;
font-size: 17px;
font-family: sans-serif;
}
.about {
background-color: gold;
padding: 12px;
}
.px {
font-size: 25px;
}
.em {
font-size: 1.25em;
}
.per {
font-size: 175%;
}
.rem {
font-size: 1.7rem;
}Значення у дії
HTML
<p>Пропиши нове значення для властивості <code>font-size</code>. У цьому прикладі, воно буде застосоване як пікселі (px).</p>
<input type="number" id="val" value="25" min="0">
<hr>
<div id="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</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;
}
#block {
padding: 10px;
background: gold;
}JS
document.querySelectorAll('#val').forEach((el) => el.addEventListener('change', function () {
document.querySelectorAll('#block').forEach((n) => n.style.setProperty('font-size', this.value + 'px'));
}));Приклад використання
HTML
<section class="example">
<header class="example-header">
<p class="example-name">
<code class="example-value">font-size: medium;</code>
</p>
<div class="example-description">
<p>У тексті буде використано середній розмір браузера за умовчанням.</p>
</div>
</header>
<aside class="example-preview">
<div class="example-browser"><i></i><i></i><i></i></div>
<div class="example-output">
<div class="example-output-div font-size " id="font-size-medium"><p>Hello world</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime, iure.</p></div>
</div>
</aside>
<style type="text/css">#font-size-medium{ font-size:medium;}</style>
</section>
<section class="example">
<header class="example-header">
<p class="example-name">
<code class="example-value" data-tooltip="Click to copy" data-clipboard-text="font-size: 20px;">font-size: 20px;</code>
</p>
<div class="example-description">
<p>Ви можете використовувати значення пікселів.</p>
</div>
</header>
<aside class="example-preview">
<div class="example-browser"><i></i><i></i><i></i></div>
<div class="example-output">
<div class="example-output-div font-size " id="font-size-20px"><p>Hello world</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, consequuntur.</p></div>
</div>
</aside>
<style type="text/css">#font-size-20px{ font-size:20px;}</style>
</section>CSS
.example {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 2rem 3rem 0;
}
.example-header {
padding-right: 2rem;
width: 60%;
}
.example-value {
background: #ffdd57;
border-radius: 2px;
color: rgba(0,0,0,0.7);
display: inline-block;
padding: 0.1em 0.5em 0.15em;
vertical-align: top;
font-size: 20px;
}
.example-description {
font-size: 0.9rem;
margin-top: 0.5rem;
font-size: 18px;
}
.example-output {
border: 1px solid #e6e6e6;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
box-shadow: 0 2px 3px rgba(0,0,0,0.05);
font-size: 0.8em;
padding: 0.5em;
}
.example-preview {
width: 40%;
}Коментарі
Коментарів ще немає — будьте першим!