css.in.ua
Підтримати

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

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

Функція @font-face дозволяє вам вибирати з більш широкого кола шрифтів, ніж доступно звичайно, спираючись виключно на системні шрифти користувача.

Можливі значення

Шрифти, зазначені за допомогою команди @font-face при правильній версії, виводяться та активуються лише у тому випадку, якщо вони використовуються у документі HTML. Це добре для продуктивності, оскільки шрифт не завантажується, якщо цього не потрібно.

Ось приклад використання функції @font-face:

@font-face {

  font-family: "Open Sans";

  src: url("opensans.woff2") format("woff2");

}

body { 

  font-family: "Open Sans", sans-serif; 

}

У цьому прикладі за допомогою @font-face відбувається завантаження шрифту. Як сімейство шрифтів використовується "Open Sans". Потім йде звертання до цього сімейства шрифтів, коли він використовується для елемента <body>.

Не використовуючи @font-face, шрифти, які користувач може побачити на сторінці, буде обмежена шрифтами, встановленими на його пристрої.

Отже, якщо у прикладі не використовувалася функція @font-face для підключення шрифту, шрифт "Open Sans" для елемента <body> буде працювати, лише якщо користувач встановив цей шрифт на своєму пристрої. Якщо ні, його браузер використовуватиме стандартний шрифт з сімейства sans-serif. Багато систем використовують Helvetica або Arial як стандартний шрифт sans-serif, проте немає гарантії, що навіть ці шрифти будуть встановлені в системі користувача.

Використання декількох форматів файлів

Ви можете надати список форматів шрифтів для завантаження. Якщо система користувача не підтримує один формат, він може підтримувати наступний у своєму списку і так далі.

Ось приклад:

@font-face {

  font-family: "Open Sans";

  src: local("Open Sans"),

    url("opensans.woff2") format("woff2"),

    url("opensans.woff") format("woff"),

    url("opensans.ttf") format("truetype");

}

body { 

  font-family: "Open Sans", sans-serif; 

}

У наведеному вище прикладі використовується функція local(), щоб отримати шрифт з локальної системи користувача. Якщо його не знайдено, він буде шукати наступний параметр - у цьому випадку - параметр .woff2. Якщо система не підтримує цей формат шрифту, вона буде використовувати опцію .woff. Якщо він не підтримує цей параметр, він буде використовувати опцію .ttf.

Якщо жоден з цих параметрів не працює, елемент <body> буде в кінцевому підсумку використовувати стандартний шрифт sans-serif у системі користувача.

Формати

Строки форматування, визначені у CSS:

  • "woff" - WOFF (Web Open Font Format) - .woff
  • "truetype" - TrueType - .ttf
  • "opentype" - OpenType - .ttf, .otf
  • "embedded-opentype" - Embedded OpenType - .eot
  • "svg" - SVG Font - .svg, .svgz

Формат файлу WOFF був розроблений, щоб забезпечити легке, просте у застосуванні стиснення шрифтів, придатних для використання з функцією @font-face. Будь-який належним чином ліцензований TrueType / OpenType / Open Font Format файл може бути упакований у форматі WOFF для використання в Інтернеті.

Формат WOFF2 забезпечує поліпшене стиснення у форматі WOFF, і він спостерігається приблизно на 30% швидше (і навіть на 50% швидше), ніж WOFF1, в залежності від використовуваного шрифту.

Можливі значення

У @font-face прописуються такі дескриптор, які визначають місце розташування шрифтів як локально, так і зовні, а також стильові характеристики окремого сімейства шрифтів:

font-family

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

src

Визначає адресу за якою розташований шрифт. Його значення - це пріоритетний список, розділений комами, список зовнішніх або локальних посилань. Коли викликається шрифт, браузер проходить список наведених посилань, використовуючи перший, який він може успішно активувати. Шрифти, що містять недійсні дані або не знайдені локальні шрифти, ігноруються, а браузер завантажує наступний шрифт зі списку. Цей дескриптор обов'язковий. Синтаксис:

[ <url> [format(<string> #)]? | <font-face-name> ] #

font-style

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

Можливі значення:

  • normal
  • italic
  • oblique

Значення без задання normal.

font-weight

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

Можливі значення:

  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

Значення без задання normal.

font-stretch

Цей дескриптор визначає розтягування тексту, до якого застосований даний шрифт.

Можливі значення:

  • normal
  • normalultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded

Значення без задання normal.

unicode-range

Цей дескриптор визначає набір кодів Unicode, які можуть підтримуватися типом шрифту, для якого він оголошений. Можна вказати як єдину кодову точку або діапазон кодових точок. Ось як це працює:

Єдина кодова точка

Кодова точка Юнікоду, представлена у вигляді від шести до шести шістнадцятиричних цифр. Приклад: U+1F41D (символ символу смайлика HONEYBEE).

Діапазон інтервалів

Представлено як два пункти коду Юнікоду з дефісом, що вказують включені початкові та кінцеві коди точок. Приклад: U+25A0-25FF (діапазон геометричних фігур).

Словник діапазону

Визначається набором кодів, що маються на увазі при проходженні ? символи означають будь-яку гексадексимальну цифру. Приклад: U+30?? (діапазон для символів хірагани).

font-variant

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

Приймає такі значення:

normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic(<feature-value-name>) || historical-forms || styleset(<feature-value-name> #) || character-variant(<feature-value-name> #) || swash(<feature-value-name>) || ornaments(<feature-value-name>) || annotation(<feature-value-name>) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby ]

font-feature-settings

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

Дозволяє вказувати тег функцій OpenType наступним чином:

normal | <feature-tag-value> #

Ліниве завантаження шрифтів

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

Розглянемо цей приклад:

@font-face {

  font-family: "Open Sans";

  src: url("opensans.woff2") format("woff2");

}



aside { 

  font-family: "Open Sans", sans-serif;

}

```Шрифт "Open Sans" буде завантажений тільки в тому випадку, якщо HTML-документ містить елемент, що його використовує. Якщо ні, шрифт не буде завантажений.

Шрифт також може бути завантажений, навіть якщо "Open Sans" не на першому місці у списку. Наприклад, він може бути завантажений у цьому випадку:

@font-face { font-family: "Open Sans"; src: url("opensans.woff2") format("woff2"); }

aside { font-family: Sniglet, "Open Sans", sans-serif; }

Синтаксис

@font-face {


  [ font-family: <family-name>; ] ||


  [ src: [ <url> [ format(<string>#) ]? | <font-face-name> ]#; ] ||


  [ unicode-range: <urange>#; ] ||


  [ font-variant: <font-variant>; ] ||


  [ font-feature-settings: normal | <feature-tag-value>#; ] ||


  [ font-stretch: <font-stretch>; ] ||


  [ font-weight: <weight>; ] ||


  [ font-style: <style>; ]


}

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

font-family

Визначає назву шрифту

src

Визначає адресу за якою розташований шрифт.

font-style

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

font-weight

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

font-stretch

Цей дескриптор визначає розтягування тексту, до якого застосований даний шрифт.

unicode-range

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

font-feature-settings

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

Значення без задання:
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис:

Переглядачі

Переглядач
font-face

4.0

9.0

3.5

3.1

12.0

12.0
Переглядач
font-face

2.1

1.0

5.0

Мобільних переглядачів ще не додано.

Приклади


Приклад використання

Синтаксис

@font-face {


    font-family: "Open Sans";


    src: url("opensans.ttf");


    font-weight: 700;


    font-style: italic;


    font-stretch: extra-condensed;


 }

Додаткові посилання

Документи

Зв'язок