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Визначає стиль шрифту. Значення без задання є
normalfont-variantВизначає варіант шрифту. Значення без задання є
normalfont-weightВизначає товщину шрифту. Значення без задання є
normalfont-size/line-heightВизначає розмір шрифту і висоту рядка. Значення без задання є
normalfont-familyЗадає сімейство шрифтів. Значення без задання залежить від браузера
captionШрифт для тексту елементів форм на кшталт кнопок
iconШрифт для тексту під іконками
menuШрифт що застосовується в меню
message-boxШрифт для діалогових вікон
small-captionШрифт для підписів до невеликих елементів управління
status-barШрифт для рядка стану вікон
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивостей від свого батьківського елемента
| Значення без задання: | Залежить від використання |
|---|---|
| Наслідує: | Так |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.font="italic small-caps bold 12px arial,sans-serif" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| font | 1.0 |
4.0 |
1.0 |
1.0 |
6.0 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| font | 1.0 |
1.0 |
1.0 |
Мобільних переглядачів ще не додано.
Приклади
Значення у дії
Приклад використання
Демонстрація деяких інших значень властивістей шрифту
<p style="font:caption">The browser font used in captioned controls.</p>
<p style="font:icon">The browser font used in icon labels.</p>
<p style="font:menu">The browser font used in dropdown menus.</p>
<p style="font:message-box">The browser font used in dialog boxes.</p>
<p style="font:small-caption">A smaller version of the caption font.</p>
<p style="font:status-bar">The browser font used in the status bar.</p>Вказує всі властивості шрифту в одній декларації
img {
float: right;
}