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

правити

Переглядачі

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

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

Переглядач
	1	1	1	3.5	12	3

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

Переглядач
	4.4	18	4	1

Приклади

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

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

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

<p>Спробуй прописати ім'я якогось відомого тобі шрифта або сімейства шрифтів. Наприклад, <em>monospace</em>, <em>fantasy</em>, <em>Open Sans</em> тощо. Це ім'я буде використане як значення для властивості <code>font-family</code>:</p>

<input type="text" id="val" value="sans-serif">

<hr>

<div id="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}

p {
  margin-top: 0;
}

#block {
  padding: 10px;
  background: gold;
}

document.querySelectorAll('#val').forEach((el) => el.addEventListener('change', function () {
  document.querySelectorAll('#block').forEach((n) => n.style.setProperty('font-family', this.value));
}));

<div class="field-items">
   <div class="field-item even">
      <div id="playground-result" style="font-family: sans-serif;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium consequuntur ducimus illo magni ipsum. Sunt ullam a enim dolor officia incidunt fugit et voluptatum modi amet ab quos impedit odit pariatur aperiam, veritatis iusto ut? Laborum culpa doloremque sit rerum!</div>
      <div class="grid-x grid-margin-x">
         <div id="playground-value" class="cell medium-12 large-6">
           <label>
             <input type="radio" name="value" value="Arial" checked="">Arial</label>
           <label>
             <input type="radio" name="value" value="Georgia">Georgia</label>
           <label>
             <input type="radio" name="value" value="Courier">Courier</label>
           <label>
             <input type="radio" name="value" value="serif">serif</label>
           <label>
             <input type="radio" name="value" value="sans-serif">sans-serif</label>
           <label>
             <input type="radio" name="value" value="cursive">cursive</label>
           <label>
             <input type="radio" name="value" value="fantasy">fantasy</label>
           <label>
             <input type="radio" name="value" value="monospace">monospace</label></div>
      </div>
   </div>
</div>

#playground-result{
  padding: 10px;
  font-size: 16px;
  border: 2px solid grey;
  margin-bottom: 10px;
}
label{
  font-size: 18px;
}

var radios = document.querySelectorAll('#playground-value input[type="radio"]');
function changeHandler(event) {
  document.getElementById('playground-result').style.fontFamily = this.value;
}
Array.prototype.forEach.call(radios, function (radio) {radio.addEventListener('change', changeHandler);});
//# sourceURL=pen.js

<p class="f1">Список: "NoSuchFont", monospace — показано monospace</p>
<p class="f2">serif</p>
<p class="f3">sans-serif</p>
<p class="f4">Помилка: "sans-serif" у лапках — ключове слово не спрацює</p>

p {
    padding: 6px;
    border: 1px solid #ddd;
    font-size: 18px;
}

.f1 {
    font-family: "NoSuchFont", monospace;
}

.f2 {
    font-family: serif;
}

.f3 {
    font-family: sans-serif;
}

.f4 {
    font-family: "sans-serif";
}

<p>Для цього абзацу заданий цілий список шрифтів: <em>Raleway, "Open Sans", sans-serif</em>. Один за одним, браузер буде намагатися знайти шрифт зі списку серд встановлених на Вашому комп'ютері. Якщо жоден не буде знайдений, браузер застосує якийсь доступний шрифт з сімейства <em>sans-serif</em>.</p>

<p class="special">А для цього тексту, ми застосували такий список: шрифт з сімейства <em>fantasy, serif</em>. І так само, якщо шрифта з сімейства <em>fantasy</em> не буде на Вашому комп'ютері, браузер застосує доступний з сімейства <em> serif</em>.</p>

body {
  font: 18px/1.45 sans-serif;
}

p {
  font-family: Raleway, "Open Sans", sans-serif;
}

p.special {
  font-family: fantasy, serif;
}