Як змінити шрифт тексту за допомогою свойтва css font-family

Ще одне завдання при роботі текстом - це зміна шрифту, яким він написаний. У різних ситуаціях той чи інший шрифт може краще вписуватися в дизайн сторінки.

Про основні шрифтах, які можна використовувати при веб-розробці, я писав тут.

Зараз невелика замітка, в якій я хотів би розповісти про спосіб, як можна змінювати шрифт тексту за допомогою технології CSS.

Для вирішення цього завдання використовується спеціальне властивість, яке називається

Синтаксис тут наступний:

Як значення цієї властивості перераховується серія шрифтів, які можуть бути застосовані до вибраного елементу. Кожен новий шрифт вказується через кому.

Якщо з властивістю inherit все більш менш зрозуміло, шрифт елемента буде запозичувати від шрифту елемента його батька, але чому вказується саме серія шрифтів?

Як я вже писав в минулій замітці. зі шрифтами є одна велика проблема: якщо якийсь шрифт встановлений на вашому комп'ютері, це зовсім не означає, що він також буде встановлений на будь-якому іншому комп'ютері.

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

Найбільший пріоритет серед зазначеного списку має шрифт, який вказується найпершим. Комп'ютер в першу чергу шукає саме його. Якщо цей шрифт не встановлений на комп'ютері, то наступним шукається шрифт, який вказаний після коми і.т.д. до того моменту, поки не дійдемо до одного з стандарних шрифтів: serif, sans-serif, cursive, fantasy або monospace.

Один зі стандартних шрифтів, як правило, вказується найостаннішим, хоча ця умова не є обов'язковим.

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

Маємо елементи абзаців, кожен з яких ми зараз оформимо різними шрифтами:

В даному прикладі не вказується серія шрифтів, а задається один конкретний шрифт, який повинен бути застосований до абзацу. Це є не найкращим рішенням, тому, найчастіше, краще підстрахуватися.

Загалом, особливих труднощів у роботі з властивістю font-family виникнути не повинно. Все досить просто і інтуїтивно зрозуміло.