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