@font-face
 Internet Explorer |  Netscape |  Opera |  Safari |  Firefox | |||||||||||||
| 6.0 | 7.0 | 8.0 | 8.0 | 9.0 | 8.0 | 9.2 | 9.5 | 1.3 | 2.0 | 3.1 | 1.5 | 2.0 | 3.0 | ||||
| Частично | Частично | Частично | Нет | Нет | Нет | Нет | Нет | Нет | Нет | Да | Нет | Нет | Нет | ||||
| CSS | CSS2, CSS3 |
| Значение по умолчанию | нет |
Описание
Правило @font-face позволяет определить настройки шрифтов, а также загрузить специфичный шрифт на компьютер пользователя.
Синтаксис
@font-face { параметры шрифта }
Значения
Внутри конструкции @font-face может находиться набор свойств для изменения параметров шрифта (font-family, font-size, font-style и др.), а также ссылка на шрифтовой файл. Ссылка записывается в виде src: url(URI), где URI — относительный или абсолютный путь к файлу.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>@font-face</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
@font-face
{
font-family: Pompadur; /* Имя шрифта */
src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */
}
P
{
font-family: Pompadur;
}
</style>
</head>
<body>
<p>Протяженность варьирует дорийский микрохроматический интервал, но если бы песен было раз в пять меньше, было бы лучше для всех.</p>
</body>
</html>
Результат: Собственный шрифт на странице
Браузеры
Браузер Internet Explorer до седьмой версии включительно поддерживает только шрифты формата EOT (Embedded OpenType).