Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
6.0 + | 8.0 + | 1.0 + | 3.5 + | 1.0 + | 1.0 + | 1.0 + | 1.0 + |
Коротка інформація
Значення за умовчанням | Залежить від використання |
---|---|
Успадковується | Так |
Застосовується | До всіх елементів |
Посилання на специфікацію | http://www.w3.org/TR/CSS21/fonts.html#propdef-font |
Версії CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Опис
Універсальний атрибут, яке дозволяє одночасно задати кілька характеристик шрифту і тексту.
Синтаксис
font: [font-style || font-variant || font-weight] font-size [/line-height] font-family | inherit
Значення
В якості обов'язкових значень властивості font вказується розмір шрифту і його сімейство. Решта значення є опціональними і задаються при бажанні. Для детального ознайомлення дивіться інформацію про кожного властивості окремо.
- inherit
- Успадковує значення батька.
Допускається в як значення використовувати ключові слова, що визначають шрифт різних елементів операційної системи користувача.
- caption
- шрифт для тексту елементів форм на кшталт кнопок.
- icon
- Шрифт для тексту під іконками.
- menu
- Шрифт застосовуваний в меню.
- message-box
- Шрифт для діалогових вікон.
- small-caption
- Шрифт для підписів до невеликих елементів управління.
- Status-bar
- Шрифт для рядка стану вікон.
Приклади використання
p {font: 12pt /10pt sans -serif; }
З типографіки пішла запис вказувати через слеш розмір шрифту і межстрочное відстань (інтерліньяж). Тому 12pt в даному випадку означає розмір основного тексту в пунктах, а 10pt — інтерліньяж. Як сімейства вказується рубаний шрифт ( sans-serif ).
p {font: bold italic 110% serif; }
Значення bold встановлює жирне накреслення тексту, а italic — курсивное. В даному випадку їх порядок не важливий, тому bold і italic можна поміняти місцями. Розмір тексту задається у відсотках, а в якості гарнітури використовується шрифт із зарубками ( serif ).
p {font: normal small-caps 12px /14px fantasy; }
Значення small-caps належить властивості font-variant і встановлює текст у вигляді капітелі (великі літери зменшеного розміру). Значення normal застосовується відразу до двом властивостям: font-style і font-weight .
Приклад
HTML5 CSS2.1 IE Cr Op Sa Fx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> font </title> <style> .layer1 {font: 12pt sans-serif; } h1 {font: 200% serif; } </style> </head> <body> <div class="layer1"> <h1> Duis te feugifacilisi </h1> Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. </div> </body> </html>
Результат даного прикладу показаний на рис. 1.

Об'єктна модель
[window.] Document.getElementById (" elementID "). Style. font
Браузери
Internet Explorer до версії 7.0 включно не підтримує значення inherit .