@font-face
Правило CSS @font-face применяется для изменения стиля шрифта, чтобы при использовании свойства font-family шрифт отображался не в первозданном, а сразу в измененном виде. Кроме этого, с помощью @font-face можно подключать дополнительные шрифты и также сразу изменять их стили.
Тип правила
Назначение: at-правила.
Применяется: в любом количестве, но в каждом правиле @font-face может использоваться только одно свойство font-family и только с одним именем шрифта.
Значения
Значением @font-face является указание заключенного в фигурные скобки { } списка свойств шрифта, таких как: src (для подключения нового шрифта), font-size, font-style, unicode-range и так далее. Но обязательно необходимо указать свойство font-family и задать имя шрифту, чтобы потом можно было на это имя ссылаться.
Синтаксис
@font-face { стили шрифта }Пример CSS: использование @font-face
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - CSS правило @font-face</title>
<style type="text/css">
@font-face {
font-family: "Dsnote"; /* имя шрифта */
src: url('files/dsnote.ttf'); /* файл со шрифтом */
}
p {
font-family: "Dsnote"; /* имя шрифта для тега P */
}
</style>
</head>
<body>
<p>Текст шрифтом Dsnote.</p>
</body>
</html>Результат. Использование правила CSS @font-face.
Браузеры Internet Explorer до версии 8.0 включительно поддерживают описываемое At-правило, но понимают только шрифты формата EOT, который активно продвигается компаниями Microsoft и Adobe, поэтому пример в данных браузерах не будет работать.
Версии CSS
| Версия: | CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
| Поддержка: | Нет | Да | Нет | Да |
Браузеры
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari | ||
| Версия: | 6.0 и выше | 2.0 и выше | 2.0 и 3.0 | 3.6 и выше | 9.2 и 9.6 | 10.0 и выше | 3.1 и выше |
| Поддержка: | Да | Да | Нет | Да | Нет | Да | Да |