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-family: font|initial|inherit;Властивість font-family може отримувати 3 значення:
| Значення без задання: | Залежить від браузера |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.fontFamily="Verdana,sans-serif" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| font-family | 1.0 |
3.0 |
1.0 |
1.0 |
3.5 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| font-family | 1.0 |
1.0 |
1.0 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Динамічний приклад
Приклад використання
Вказує шрифт для абзацу
p {
font-family: "Times New Roman", Georgia, Serif;
}