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

Властивість font-family задає шрифт для тексту.

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

Існує два типи сімейств шрифтів:

• family-name — Ім'я сімейства шрифру, наприклад times, courier, arial і т.п.
• generic-family — Ім'я спільного сімейства, наприклад serif, sans-serif, cursive, fantasy, monospace.

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

Якщо ім'я шрифту містить пробіли, цифри або знаки пунктуації (окрім дефісів), рекомендується оточувати його окремими або подвійними лапками (наприклад, "Times New Roman" або 'Times New Roman'). Хоча це не є обов'язковим, це може допомогти уникнути різноманітних помилок.

Ви також можете використовувати лапки для імен шрифтів, які не мають пропусків (наприклад, 'Helvetica'), але знову ж таки це необов'язково.

Тим не менш, ви завжди повинні використовувати лапки для імен шрифтів, які мають таке саме ім'я, що і загальний шрифт або ключове слово. Наприклад, якщо шрифт називається fantasy, ви повинні написати з лапками (наприклад, fantasy), щоб запобігти плутанині з ключовим словом з тим самим ім'ям. І, хоча поточна специфікація прямо не заявляє про це, варто цитувати будь-які назви шрифтів, які відповідають будь-яким ключовим словом CSS.

Що таке сімейство шрифтів?

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

Хоча терміни "шрифт" і "сімейство шрифтів" мають дещо інше значення ("шрифт" більш точний, ніж "сімейство шрифтів"), вони часто використовуються разом в колах веб-дизайну і є рівнозначними один-одному.

Чому мені потрібно зазначати кілька шрифтів?

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

Коли ми використовуємо font-family, ми покладаємось на комп'ютер користувача, що у нього вже встановленим вказаний нами шрифт. Якщо ми вказуємо шрифт, що називається, скажімо "Roboto", користувач може використовувати його лише, якщо його встановлено на його комп'ютері. Як вже було написано, не варто очікувати, що всі користувачі матимуть у себе на комп'ютері потрібний нам шрифт, тому нам потрібно вжити заходів для того, щоб комп'ютер користувача вибрав шрифт, який приблизно аналогічний тому, який хочемо ми.

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

Правило @font-face

Ви також можете використовувати конструкцію @font-face, щоб вказати комп'ютеру користувача завантажити шрифт, якщо він недоступний. Це дозволить забезпечити більшість користувачів шрифтом першого вибору (він буде встановлений, якщо у вас його немає). Однак, як і у випадку з усіма речами в Інтернеті, немає 100% гарантії, що шрифт буде працювати на комп'ютері, тому ви завжди повинні мати шрифт для "найгіршого сценарію". Цей шрифт повинен бути одним з п'яти родинних сімейств шрифтів: serif, sans-serif, cursive, fantasy, або monospace. Більшість шрифтів ідеально підійдуть до однієї з цих категорій, тому вам просто потрібно вибрати найбільш відповідний для вашого.

правити

Нотатка

Ви можете використовувати універсальну властивість font, щоб стилізувати шрифт.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

font-family: font|initial|inherit;

Властивість font-family може отримувати 3 значень:

family-name generic-family

Ім'я сімейства шрифту або спільне сімейство.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
font-family	1.0	1.0	1.0	3.5	12.0	3.0

Підтримка: мобільні переглядачі

Переглядач
font-family	1.0	1.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<p>Цей абзац набрано Times New Roman; якщо його немає — Georgia, а далі будь-який серифний шрифт.</p>

p {
    font-family: "Times New Roman", Georgia, serif;
}