css властивість font
Властивість font — універсальна властивість і дозволяє одночасно задати значення:
font-stylefont-variantfont-weightfont-size/line-heightfont-family
Властивість line-height задає відстань між рядками.
В якості обов'язкових значень властивості font вказується розмір шрифту і його сімейство. Решта значення є опціональними і задаються при бажанні.
Допускається в якості значення використовувати ключові слова, що визначають шрифт різних елементів операційної системи користувача.
Значення властивості
font-family
Властивість font-family дозволяє встановлювати сімейство шрифтів (його назву, за допомогою якої далі в коді можна викликати шрифт).
font-family приймає список різних сімейств шрифтів. Це відбувається тому, що не всі користувачі матимуть ті ж шрифти, що встановлені на Вашому комп'ютері. Тому, як дизайнер / розробник, ви можете надати список шрифтів, щоб хоча б якийсь шрифт завантажився у більшості користувачів.
Коли браузер зустрічає перший шрифт у списку, він перевіряє його наявність на комп'ютері користувача. Якщо такого шрифту немає, береться наступне ім'я зі списку і також аналізується на присутність. Тому кілька шрифтів збільшує ймовірність, що хоча б один з них буде виявлений на клієнтському комп'ютері. Закінчують список зазвичай ключовим словом, яке описує тип шрифту - serif, sans-serif, cursive, fantasy або monospace. Таким чином, послідовність шрифтів краще починати з екзотичних типів і закінчувати узагальненим ім'ям, яке задає вид накреслення.
font-size
Властивість font-size дозволяє встановити розмір символів.
Розмір може бути встановлений декількома способами. Набір констант (xx-small, x-small, small, medium, large, x-large, xx-large) задає розмір, який називається абсолютним. По правді кажучи, вони не зовсім абсолютні, оскільки залежать від налаштувань браузера і операційної системи.
Інший набір констант (larger, smaller) встановлює відносні розміри шрифту. Оскільки розмір успадкований від батьківського елемента, ці відносні розміри застосовуються до батьківського елементу, щоб визначити розмір шрифту поточного елементу.
В кінцевому підсумку, розмір шрифту сильно залежить від значення властивості font-size у батька елемента.
font-size-adjust
Ця властивість дозволяє вам налаштувати висоту, щоб зробити текст більш розбірливим.
font-stretch
Це властивість вибирає звичайну, стиснену або розтягнуту версію використовуваного шрифту.
font-style
Властивість використовується для зміни стилю текста на курсив або похилий.
Коли для тексту встановлено курсивне або похиле накреслення, браузер звертається до системи для пошуку відповідного шрифту. Якщо заданий шрифт не знайдений, браузер використовує спеціальний алгоритм для імітації потрібного виду тексту.
font-variant
У CSS1 та CSS2 ціль властивості полягала лише в тому, щоб текст використовував гліфи для великих літер замість маленьких. У CSS3, вона стала універсальною властивістю для:
font-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numeric
font-weight
Робить текст жирним або тонким.
Насиченість шрифту задається за допомогою ключових слів: bold - жирне накреслення і normal - нормальне накреслення. Також допустимо використовувати умовні одиниці від 100 до 900. Значення bolder і lighter змінюють жирність щодо насиченості батька, відповідно, в більшу і меншу сторону.
line-height
Встановлення міжрядкового інтервалу.
Будь-яке число більше нуля сприймається як множник від розміру шрифту поточного тексту. Наприклад, значення 1.5 встановлює полуторний міжрядковий інтервал. Як значення приймаються також будь-які одиниці довжини, прийняті в CSS - пікселі (px), дюйми (in), пункти (pt) та ін. Дозволяється використовувати процентний запис, в цьому випадку за 100% береться висота шрифту.
Синтаксис
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;Властивість font може отримувати 13 значень:
-
font-style -
Визначає стиль шрифту. Значення без задання є
автор: Svitlananormal -
font-variant -
Визначає варіант шрифту. Значення без задання є
автор: Svitlananormal -
font-weight -
Визначає товщину шрифту. Значення без задання є
автор: Svitlananormal -
font-size/line-height -
Визначає розмір шрифту і висоту рядка. Значення без задання є
автор: Svitlananormal -
font-family -
Задає сімейство шрифтів. Значення без задання залежить від браузера
автор: Svitlana -
caption -
Шрифт для тексту елементів форм на кшталт кнопок
автор: Svitlana -
icon -
Шрифт для тексту під іконками
автор: Svitlana -
menu -
Шрифт що застосовується в меню
автор: Svitlana -
message-box -
Шрифт для діалогових вікон
автор: Svitlana -
small-caption -
Шрифт для підписів до невеликих елементів управління
автор: Svitlana -
status-bar -
Шрифт для рядка стану вікон
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивостей від свого батьківського елемента
автор: Svitlana
| Значення без задання: | Залежить від використання |
|---|---|
| Наслідує: | Так |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.font="italic small-caps bold 12px arial,sans-serif" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3.5 | 12 | 3 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Системні ключові слова font підставляють цілий шрифт операційної системи: підписи елементів керування, меню, діалоги. У сучасних браузерах більшість із них виглядають схоже, але це справжні системні шрифти, а не одна гарнітура.
HTML
<p class="caption">font: caption — шрифт підписів елементів керування</p>
<p class="icon">font: icon — шрифт підписів піктограм</p>
<p class="menu">font: menu — шрифт меню</p>
<p class="message-box">font: message-box — шрифт діалогових вікон</p>
<p class="small-caption">font: small-caption — менша версія caption</p>
<p class="status-bar">font: status-bar — шрифт рядка стану</p>CSS
.caption { font: caption; }
.icon { font: icon; }
.menu { font: menu; }
.message-box { font: message-box; }
.small-caption { font: small-caption; }
.status-bar { font: status-bar; }Усе про шрифт однією декларацією: стиль, насиченість, розмір/міжряддя і родина. Обов'язкові лише розмір і родина — решту можна опустити.
HTML
<p class="a">font: italic bold 16px/1.6 Georgia, serif</p>
<p class="b">font: 14px monospace — лише обов'язкова пара</p>CSS
.a {
font: italic bold 16px/1.6 Georgia, serif;
}
.b {
font: 14px monospace;
}Приклад використання
Значення у дії
Коментарі
Коментарів ще немає — будьте першим!