css властивість font


Властивість font — універсальна властивість і дозволяє одночасно задати значення:

  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-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-alternates
  • font-variant-caps
  • font-variant-east-asian
  • font-variant-ligatures
  • font-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

Визначає стиль шрифту. Значення без задання є normal

font-variant

Визначає варіант шрифту. Значення без задання є normal

font-weight

Визначає товщину шрифту. Значення без задання є normal

font-size/line-height

Визначає розмір шрифту і висоту рядка. Значення без задання є normal

font-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;


}

Додаткові посилання