css властивість font-size

Властивість font-size встановлює розмір шрифту. Розмір шрифту - це висота від базової лінії літери до її верхнього краю.

Ви можете вказати в якості значення абсолютний або відносний розмір, довжину або відсоток.

Ключові слова для задання абсолютного розміру зберігаються браузером в таблиці розмірів шрифтів. Коли ви використовуєте таке ключове слово, користувацький агент шукає таблицю і відповідно обчислює розмір шрифту.

Ключові слова для задання відносного розміру переміщають розмір шрифту за списком абсолютних розмірів шрифтів вище. Наприклад, якщо батьківський елемент має середовище, значення меншого за чинним елементом зробить його розмір шрифтом маленьким. Якщо розмір шрифту батька не збігається з абсолютним ключовим словом, користувацький агент обчислює його або шляхом вибору розміру між абсолютними значеннями ключових слів або округленням до найближчого.

Якщо розмір знаходиться за межами діапазону абсолютних значень ключових слів, користувальницький агент буде екстраполювати розмір відповідно.

Ось приблизне керівництво щодо відображення між абсолютними розмірами CSS, заголовком HTML та абсолютними розмірами шрифтів. Зверніть увагу, що фактичне значення може змінюватися в залежності від значення параметра font-size-adjust та недоступності певних розмірів шрифтів.

Також дозволяється використовувати будь-які допустимі одиниці 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 для вирішення цієї проблеми. В основному вона дозволяє вказати, щоб всі резервні шрифти використовували одне і те ж співвідношення сторін. Коли ви це зробите, резервний шрифт відображається у дуже близькому розмірі до потрібного шрифту.

правити

+ додати пораду чи нотатку

Синтаксис

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

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
font-size	1.0	1.0	1.0	7.0	12.0	5.5

Підтримка: мобільні переглядачі

Переглядач
font-size	1.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<h1>Заголовок на 250%</h1>
<h2>Заголовок на 200%</h2>
<p>Абзац на 100% — базовий розмір.</p>

h1 {
    font-size: 250%;
}

h2 {
    font-size: 200%;
}

p {
    font-size: 100%;
}