Шрифт - CSS-хитрощі | Альманах CSS 2025

fontВластивість в CSS є властивість стенографії , що поєднує в собі всі наступні суб-властивості в одній декларації.

body ( font: normal small-caps normal 16px/1.4 Georgia; ) /* is the same as: body ( font-family: Georgia; line-height: 1.4; font-weight: normal; font-stretch: normal; font-variant: small-caps; font-size: 16px; ) */

Є сім fontпідвластивостей, включаючи:

font-stretch: ця властивість встановлює ширину шрифту, наприклад, стиснуту або розширену.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: робить текст курсивом або косим.
- normal
- italic
- oblique
- inherit
font-variant: змінює цільовий текст на маленькі.
- normal
- small-caps
- inherit
font-weight: встановлює вагу або товщину шрифту.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: встановлює висоту шрифту.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: визначає обсяг простору над та під вбудованими елементами.
- normal
- number (font-size multiplier)
- percentage
font-family: визначає шрифт, який застосовується до елемента.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Стислий шрифт Gotchas

fontВластивість не так просто , як і інші властивості стенографії, частково з - за вимоги синтаксису для нього, а почасти з - за проблеми успадкування.

Ось короткий опис речей, які ви повинні знати, використовуючи цю скорочену властивість.

Обов’язкові значення

Два зі fontскорочень є обов'язковими: font-sizeі font-family. Якщо жодне з них не буде включено, вся декларація буде проігнорована.

Крім того, його font-familyпотрібно оголосити останнім із усіх значень, інакше, вся декларація буде проігнорована.

Необов’язкові значення

Усі п’ять інших значень є необов’язковими. Якщо ви включите будь-який з font-style,, font-variantі font-weight, вони повинні бути раніше font-sizeв декларації. Якщо це не так, вони будуть проігноровані, а також можуть спричинити ігнорування обов’язкових значень.

body ( font: italic small-caps bold 44px Georgia, sans-serif; )

У наведеному вище прикладі включено три додаткові варіанти. Поки вони визначені раніше font-size, їх можна розміщувати в будь-якому порядку.

Включення line-heightтакож є необов’язковим, але може бути оголошено лише після font-sizeі лише після косої риски:

body ( font: 44px/20px Georgia, sans-serif; )

У наведеному вище прикладі line-height"20px". Якщо ви пропустите line-height, ви також повинні пропустити скісну риску, інакше весь рядок буде проігноровано.

За допомогою розтягування шрифтів

font-stretchВластивість нового в CSS3 , так що якщо він використовується в старому браузері , який не підтримує font-stretchв fontстенографії, це призведе до того , вся рядок ігнорується.

Специфікація рекомендує включати резервну копію без font-stretch, наприклад:

body ( font: italic small-caps bold 44px Georgia, sans-serif; /* fallback for older browsers */ font: ultra-condensed italic small-caps bold 44px Georgia, sans-serif; )

Спадщина для необов'язкових

Якщо ви опустите будь-яке з оптіанальних значень (включаючи line-height), опущені опціонали не успадкують значення від батьківського елемента, як це часто буває з типографічними властивостями. Натомість їх буде повернуто до початкового стану.

Наприклад:

body ( font: italic small-caps bold 44px/50px Georgia, sans-serif; ) p ( font: 30px Georgia, sans-serif; )

У цьому випадку необов’язкові значення (курсив, малі літери та жирний шрифт) розміщуються в fontдекларації елемента. Це також стосуватиметься більшості дочірніх елементів.

Однак, оскільки ми повторно заявили про fontвластивість елементів абзацу, усі параметри будуть скинуті для абзаців, що призведе до повернення стилю, варіанту, ваги та висоти рядка до початкових значень.

Ключові слова для визначення системних шрифтів

На додаток до вищезазначеного синтаксису, fontвластивість також дозволяє використовувати ключові слова як значення. Вони є:

caption
icon
menu
message-box
small-caption
status-bar

Ці значення ключових слів встановлюють шрифт таким, який використовується в операційній системі користувача для цієї конкретної категорії. Наприклад, визначення “caption” встановить шрифт на цьому елементі для використання того самого шрифту, який використовується в операційній системі для елементів керування з титрами (кнопок, спадних меню тощо).

Одне ключове слово містить усе значення:

body ( font: menu; )

Інші властивості, згадані раніше, не є дійсними у поєднанні з цими ключовими словами. Ці ключові слова можна використовувати лише зі fontскороченням, і їх не можна оголошувати, використовуючи будь-які окремі властивості стенограми.