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


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

Синтаксис

font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;

Властивість font-size може отримувати 13 значень:

medium

Середній розмір шрифту. Без задання.

xx-small

Шрифт екстра-екстра малого розміру.

x-small

Шрифт екстра малого розміру.

small

Шрифт малого розміру.

large

Шрифт великого розміру.

x-large

Шрифт екстра великого розміру.

xx-large

Шрифт екстра-екстра великого розміру.

smaller

Розмір шрифту трохи меньший, ніж у батьківського елемента.

larger

Розмір шрифту трохи більший, ніж у батьківського елемента.

length

Фіксований розмір шрифту в px, cm, etc

%

Розмір шрифту у відсотках. Примітка: За 100% береться розмір шрифту батьківського елементу. Від'ємні значення не допускаються.

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента.

Значення без задання: medium
Наслідує: Так
Анімується: Так
JavaScript синтаксис: object.style.fontSize="14px"

Переглядачі

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

1.0

5.5

1.0

1.0

7.0

12.0

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

1.0

1.0

1.0


Мобільних переглядачів ще не додано.

Приклади


Значення у дії

Приклад використання

Приклад використання

Встановлює розмір шрифту для різних елементів HTML

h1 {


    font-size: 250%;


}





h2 {


    font-size: 200%;


}





p {


    font-size: 100%;


}

Додаткові посилання