Визначає розмір шрифту елемента. Розмір може бути встановлений декількома способами. Набір констант (xx-small, x-small, small, medium, large, x-large, xx-large) визначає розмір, який називається абсолютним. Правду кажучи, вони не зовсім абсолютні, оскільки залежать від налаштувань браузера та операційної системи. Інший набір констант (larger, smaller) встановлює відносні розміри шрифту. Оскільки розмір успадкований від батьківського елемента, ці відносні розміри застосовуються до батьківського елемента, щоб визначити розмір шрифту поточного елемента.
Зрештою, розмір шрифту залежить від значення властивості font-size у батька елемента.
Сам розмір шрифту визначається як висота від базової лінії до верхньої межі кегельного майданчика, як показано на мал. 1.
Рис . 1. Розмір шрифту
Коротка інформація
| Значення за замовчуванням | medium |
|---|---|
| Успадковується | Так |
| Застосовується | До всіх елементів |
| Анімується | Так |
Синтаксис
<code>font-size: <абсолютний розмір> | <відносний розмір> | <розмір> | <відсотки>
Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <розмір> |
| A && B | Значення повинні виводитися в вказаному порядку. | <розмір> && <колір> |
| A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
| [ ] | Групує значення. | [ crop || cross ] |
| * | Повторювати нуль або більше разів. | [,<час>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Вказаний тип, слово або група не є обов'язковим. | inset? |
| {A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
| # | Повторювати один або більше разів через кому. | <час># |
Значення
Для завдання абсолютного розміру використовуються такі значення: xx-small, x-small, small, medium, large, x-l arge, xx-large. Їх відповідність до розміру шрифту в HTML наведена в табл. 1.
| CSS | xx-small | x-small | small | medium | large | x-large | xx-large | Ні |
|---|---|---|---|---|---|---|---|---|
| HTML | 1 | Ні | 2 | 3 | 4 | 5 | 6 | 7 |
Відносний розмір шрифту визначається значеннями larger і smaller.
Також дозволяється використовувати будь-які допустимі одиниці CSS: em (висота шрифту елемента), ex (висота символу х), пункти (pt), пікселі (px), відсотки (%) та ін. За 100% береться розмір шрифту батьківського елемента. Негативні значення не допускаються.
Пісочниця
div { font-size: <span class="playground-active">{{ playgroundValue }}em</span>; }Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font-size</title> <style> h1 { font-family: 'Times New Roman', Times, serif; /* Гарнітура тексту */
font-size: 250%; /* Розмір шрифту у відсотках */
}
p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11pt; /* Розмір шрифту в пунктах */
}
</style>
</head>
<body> <h1>Амазонська низовина</h1> <p>Для гостей відкриваються льохи Прибалатонських виноробних господарств, відомих відмінними сортами вин "Олазріслінг" та "Сюркебарат".</p>
</body>
</html>Результат цього прикладу показаний на рис. 1.
Мал. 2. Застосування властивості font-size
Об'єктна модель
Об'єкт.style.fontSize
Специфікація
| Специфікація | Статус |
|---|---|
| CSS Fonts Module Level 3 | Рекомендація |
| <
CSS Level 2 Revision 1 (CSS 2. 1) | Рекомендація |
| CSS Level 1 | Рекомендація |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) — специфікація схвалена W3C та рекомендована як стандарт. li>
- Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
| 5.5 | 12 | 1 | 7 | 1 | 1 |