CSS пропонує кілька властивостей шрифтів. безпосередньо впливають на візуалізацію тексту. Властивість font-family визначає, який шрифт використовувати.
Загальні сімейства шрифтів
Шрифти групуються за п'ятьма загальним родин:
- serif - на кінці кожного символу прикріплені невеликі лінії;
- sans-serif;
- monospace;
- cursive;
- fantasy.
cursive і fantasy ніколи не використовуються.
Оскільки властивість font-family успадковується всіма дочірніми елементами HTML, ви можете застосувати шрифт для всього HTML-документа, використовуючи його для предка всіх елементів HTML: елемента
.З цим правилом CSS веб-сторінка буде використовувати шрифт sans-serif. певний користувачем в його налаштуваннях.
Надійні веб-шрифти
Проблема використання загальних назв сімейств шрифтів полягає в тому, що дизайн вашої веб-сторінки буде покладатися на шрифт, встановлений користувачем в його налаштуваннях. Але ви, ймовірно, хочете, щоб ваша веб-сторінка виглядала однаково на будь-якому комп'ютері і побажаєте визначити конкретний шрифт, який буде використовуватися. Щоб зробити це, просто вкажіть назву шрифту.
Ваша веб-сторінка буде використовувати Arial за умови, що він встановлений на комп'ютері користувача. Якщо шрифт Arial недоступний, то браузер буде застосовувати шрифт із зарубками за замовчуванням (зазвичай використовується Times New Roman).
Arial є безпечним вибором, хоча б тому, що він встановлений на всіх комп'ютерах Windows і Mac, а також на більшості систем Linux. Саме тому Arial вважається надійним веб-шрифтом: ви можете безпечно використовувати його в CSS і бути майже впевнені, що шрифт на комп'ютері користувача буде встановлений.
Є дев'ять надійних веб-шрифтів:
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
Застосування списку шрифтів
Хоча використання будь-якого з цих значень для властивості font-family є безпечним вибором, ви можете визначити запасне значення, написавши список сімейств шрифтів:
При визначенні декількох значень для font-family. браузер буде шукати перше значення Arial і використовувати його. Якщо Arial не доступний, то буде використовуватися наступний шрифт Verdana. І, нарешті, якщо і він не доступний, то буде використовуватися шрифт браузера без зарубок за замовчуванням.
Це хороша практика використовувати загальне сімейство як останнє значення. Якщо ви не можете визначити конкретний шрифт для використання, то можете по крайней мере, визначити тип бажаного шрифту.
Оскільки дизайнери хочуть використовувати більше оригінальних шрифтів, але як і раніше бажають, щоб їх веб-сторінки виглядали однаково на будь-якому комп'ютері, можна включити шрифт на веб-сторінку. Таким чином, шрифт буде доступний, навіть якщо він не присутній на комп'ютері користувача, просто тому, що шрифт запропонує сайт.