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 - відносний або абсолютний шлях до файлу.
Приклад
HTML5 CSS2.1 CSS3 IE Cr Op 11 Op 12 Sa Fx
<!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 написано кирилицею.