CSS font — скорочений запис властивостей шрифту

Властивість font — універсальна властивість і дозволяє одночасно задати значення:

• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family

Властивість line-height задає відстань між рядками.

В якості обов'язкових значень властивості font вказується розмір шрифту і його сімейство. Решта значення є опціональними і задаються при бажанні.

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

Значення властивості

font-family

Властивість font-family дозволяє встановлювати сімейство шрифтів (його назву, за допомогою якої далі в коді можна викликати шрифт).

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

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

font-size

Властивість font-size дозволяє встановити розмір символів.

Розмір може бути встановлений декількома способами. Набір констант (xx-small, x-small, small, medium, large, x-large, xx-large) задає розмір, який називається абсолютним. По правді кажучи, вони не зовсім абсолютні, оскільки залежать від налаштувань браузера і операційної системи.

Інший набір констант (larger, smaller) встановлює відносні розміри шрифту. Оскільки розмір успадкований від батьківського елемента, ці відносні розміри застосовуються до батьківського елементу, щоб визначити розмір шрифту поточного елементу.

В кінцевому підсумку, розмір шрифту сильно залежить від значення властивості font-size у батька елемента.

font-size-adjust

Ця властивість дозволяє вам налаштувати висоту, щоб зробити текст більш розбірливим.

font-stretch

Це властивість вибирає звичайну, стиснену або розтягнуту версію використовуваного шрифту.

font-style

Властивість використовується для зміни стилю текста на курсив або похилий.

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

font-variant

У CSS1 та CSS2 ціль властивості полягала лише в тому, щоб текст використовував гліфи для великих літер замість маленьких. У CSS3, вона стала універсальною властивістю для:

• font-variant-alternates
• font-variant-caps
• font-variant-east-asian
• font-variant-ligatures
• font-variant-numeric

font-weight

Робить текст жирним або тонким.

Насиченість шрифту задається за допомогою ключових слів: bold - жирне накреслення і normal - нормальне накреслення. Також допустимо використовувати умовні одиниці від 100 до 900. Значення bolder і lighter змінюють жирність щодо насиченості батька, відповідно, в більшу і меншу сторону.

line-height

Встановлення міжрядкового інтервалу.

Будь-яке число більше нуля сприймається як множник від розміру шрифту поточного тексту. Наприклад, значення 1.5 встановлює полуторний міжрядковий інтервал. Як значення приймаються також будь-які одиниці довжини, прийняті в CSS - пікселі (px), дюйми (in), пункти (pt) та ін. Дозволяється використовувати процентний запис, в цьому випадку за 100% береться висота шрифту.

правити

Загальний опис

правити

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

Синтаксис

font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;

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

font-style

Визначає стиль шрифту. Значення без задання є normal

автор: Svitlana

правити

font-variant

Визначає варіант шрифту. Значення без задання є normal

автор: Svitlana

правити

font-weight

Визначає товщину шрифту. Значення без задання є normal

автор: Svitlana

правити

font-size/line-height

Визначає розмір шрифту і висоту рядка. Значення без задання є normal

автор: Svitlana

правити

font-family

Задає сімейство шрифтів. Значення без задання залежить від браузера

автор: Svitlana

правити

caption

Шрифт для тексту елементів форм на кшталт кнопок

автор: Svitlana

правити

icon

Шрифт для тексту під іконками

автор: Svitlana

правити

menu

Шрифт що застосовується в меню

автор: Svitlana

правити

message-box

Шрифт для діалогових вікон

автор: Svitlana

правити

small-caption

Шрифт для підписів до невеликих елементів управління

автор: Svitlana

правити

status-bar

Шрифт для рядка стану вікон

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

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

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

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

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

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

Приклади

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

<p class="caption">font: caption — шрифт підписів елементів керування</p>
<p class="icon">font: icon — шрифт підписів піктограм</p>
<p class="menu">font: menu — шрифт меню</p>
<p class="message-box">font: message-box — шрифт діалогових вікон</p>
<p class="small-caption">font: small-caption — менша версія caption</p>
<p class="status-bar">font: status-bar — шрифт рядка стану</p>

.caption       { font: caption; }
.icon          { font: icon; }
.menu          { font: menu; }
.message-box   { font: message-box; }
.small-caption { font: small-caption; }
.status-bar    { font: status-bar; }

<p class="a">font: italic bold 16px/1.6 Georgia, serif</p>
<p class="b">font: 14px monospace — лише обов'язкова пара</p>

.a {
    font: italic bold 16px/1.6 Georgia, serif;
}

.b {
    font: 14px monospace;
}

<p class="about">За допомогою універсальної властивості <strong>font</strong> ми можемо стилізувати шрифт тексту. Як тут:</p>

<p>Цей абзац не використовує ніяких властивостей.</p>

<p class="change">А тут ми встановили за допомогою властивості <code>font</code> жирність, розмір, міжрядковий інтервал, а також сімейство шрифтів.</p>

.about {
  background-color: gold;
  padding: 12px;
}

.change {
  font: bold 18px/1.45 sans-serif;
}

<p>Вибери потрібне значення для <code>font</code>. У цьому прикладі, Ви можете змінювати такі властивості як <em>font-style</em>, <em>font-variant</em>, <em>font-weight</em>, <em>font-size</em>, <em>font-family</em> (у цій же послідовності).</p>

<select id="style" onchange="update()">
  <option value="normal">normal</option>
  <option value="italic" selected>italic</option>
  <option value="oblique">oblique</option>
</select>
<select id="variant" onchange="update()">
  <option value="normal">normal</option>
  <option value="small-caps" selected>small-caps</option>
</select>
<select id="weight" onchange="update()">
  <option value="normal" selected>normal</option>
  <option value="bold">bold</option>
  <option value="100">100</option>
  <option value="200">200</option>
  <option value="300">300</option>
  <option value="400">400</option>
  <option value="500">500</option>
  <option value="600">600</option>
  <option value="700">700</option>
  <option value="800">800</option>
  <option value="900">900</option>
</select>
<input type="number" value="20" id="size" placeholder="font-size" onchange="update()" min="0">/
<input type="number" value="1.4" step="0.1" id="height" placeholder="line-height" onchange="update()" min="0">
<input type="text" value="sans-serif" id="family" placeholder="font-family" onchange="update()">

<hr>

<div id="block">
  <p>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.</p>
</div>

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

body {
  color: #222;
}

#form {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  background: #f1f1f1;
  padding: 10px;
  font: italic small-caps normal 20px/1.4 sans-serif;
}

var style = document.getElementById('style');
var block = document.getElementById('block');
var variant = document.getElementById('variant');
var weight = document.getElementById('weight');
var size = document.getElementById('size');
var height = document.getElementById('height');
var family = document.getElementById('family');

function update() {
  block.style.fontStyle = getVal(style);
  block.style.fontVariant = getVal(variant);
  block.style.fontWeight = getVal(weight);
  block.style.fontSize = size.value + 'px';
  block.style.lineHeight = height.value;
  block.style.fontFamily = family.value;
}

function getVal(el) {
  var result = '';
  for (var i = 0; i < el.options.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    if (el.options[i].selected == true) {
      result = el.options[i].value;
    }
  }window.CP.exitedLoop(0);
  return result;
}

<p>Текст сторінки для порівняння.</p>

<button>без font: inherit</button>
<button class="ok">font: inherit</button>

<p class="bold">Було font-weight: bold</p>
<p class="bold reset">Те саме, але після font: 16px sans-serif</p>

body {
    font: 16px Georgia, serif;
}
.ok {
    font: inherit;
}
.bold {
    font-weight: bold;
}
.reset {
    font: 16px sans-serif;
}