--- title: '@font-face' slug: Web/CSS/@font-face tags: - '@-правила' - '@font-face' - CSS - CSS Шрифти - Посилання - типографія - шрифти translation_of: Web/CSS/@font-face ---
@font-face
CSS @-правило вказує спеціальний шрифт для відображення текста. Шрифт може бути завантажений з зовнішнього сервера або встановлено локально на комп'ютері користувача. Якщо функція local()
вказує ім'я шрифта то його пошук буде відбуватися на комп'ютері користувача. Інакше ресурси шрифти вказані з використанням функції url()
будуть завантажені і використані
Дозвіл авторам впроваджувати їх власні шрифти дає можливість стилізувати контент без обмежень в так званих "безпечних" шрифтах (Це такі шрифти,що широко використовуються та визнані як загальнодоступні). Можливість вказувати ім'я локально встановлених шрифтів дає можливість налаштовувати шрифт більш гнучко без залежності від інтернет з'єднання.
Поширеним випадком є використання url()
і local()
разом, що дає змогу використовувати втановлений користувачем шрифт і завантажувати шрифт у разі його відсутності на користувацькому пристрої.
@font-face
@-правило може бути використане не лише на вищому рівні CSS, а й всередині будь-якого @-правила.
@font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); }
font-stretch: 50% 200%;
font-style: oblique 20deg 50deg;
font-weight: 100 400;
Вказує ресурс, що містить дані шрифта. Це може бути URL для віддаленого файлу шрифта чи ім'я для шрифта на комп'ютері користувача.
Щоб дати браузеру підказку який вибрати формат ресурсу шрифта, формат можна вказати в середині функції format()
:
src: url(ideal-sans-serif.woff) format("woff"), url(basic-sans-serif.ttf) format("truetype");
Достіпні типи: "woff"
, "woff2"
, "truetype"
, "opentype"
, "embedded-opentype"
, і "svg"
.
Цей приклад просто вказує завантажуваний шрифт для використання і застосовує його до всього тіла документа:
<html> <head> <title>Web Font Sample</title> <style type="text/css" media="screen, print"> @font-face { font-family: "Bitstream Vera Serif Bold"; src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf"); } body { font-family: "Bitstream Vera Serif Bold", serif } </style> </head> <body> This is Bitstream Vera Serif Bold. </body> </html>
В цьому прикладі використовується локальний шрифт користувача "Helvetica Neue Bold"; якщо у користувача цей шрифт не встановлений тоді натомість використовується завантажуваний шрифт "MgOpenModernaBold.ttf":
@font-face { font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; }
Формат | MIME-тип |
---|---|
TrueType | font/ttf |
OpenType | font/otf |
Web Open File Format | font/woff |
Web Open File Format 2 | font/woff2 |
@font-face
не може бути оголошеним в CSS селекторі. Наприклад наступне не працюватиме:
.className { @font-face { font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; } }
Специфікація | Статус | Коментар |
---|---|---|
{{SpecName('WOFF2.0', '', 'WOFF2 font format')}} | {{Spec2('WOFF2.0')}} | Специфікація фомату шрифта з новим алгоритмом стиснення |
{{SpecName('WOFF1.0', '', 'WOFF font format')}} | {{Spec2('WOFF1.0')}} | Специфікація формата шрифта |
{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}} | {{Spec2('CSS3 Fonts')}} | Початкове визначення |
{{Compat("css.at-rules.font-face")}}