| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | ||
| 6.0+ | 9.0+ | 2.0+ | 9.0+ | 12.0+ | 4.0+ | 3.5+ | 2.1+ | 2.0+ |
Коротка інформація
| Значення за замовчуванням | Немає |
|---|---|
| Посилання на специфікацію | http://www.w3.org/TR/css3-fonts/#font-face-rule |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Правило @font-face дозволяє визначити налаштування шрифтів та завантажити конкретний шрифт на комп'ютер користувача.
Синтаксис
@font-face { властивості шрифту }Значення
У межах конструкції @font-face може бути набір властивостей для зміни параметрів шрифту (font-family, font-size, font-style тощо), а також посилання на файл шрифту. Посилання записується у вигляді src: url(URI), де URI — відносний або абсолютний шлях до файлу.
Приклад
HTML5CSS2.1CSS3IECrOp 11Op 12SaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>@font-face</title>
<style>
@font-face {
font-family: Pompadur; /* Ім'я шрифту */
src: url(fonts/pompadur.ttf); /* Шлях до файлу із шрифтом */
}
P {
font-family: Pompadur;
}
</style>
</head>
<body>
<p>Протяжність варіює дорійський мікрохроматичний інтервал,
але якщо б пісень було в п'ять разів менше, було б краще для всіх.</p>
</body>
</html>Результат даного прикладу у браузері Safari показаний на рис. 1.
Браузери
Браузер Internet Explorer до версії 9.0 підтримує лише шрифти у форматі EOT (Embedded OpenType).
Opera у деяких випадках може не відображати на веб-сторінці текст обраним шрифтом, замінюючи його стандартним. Це відбувається у випадках, коли ім'я користувача в Windows написане кирилицею.