CSS правило @font-face дает возможность веб-дизайнерам добавлять онлайн шрифты для отображения текста на веб-страницах. Таким образом, веб-дизайнеры больше не будут ограничены использованием "безопасных веб-шрифтов".
Прежде всего нужно добавить название для шрифта (подобно myFirstFont) в новом правиле @font-face, а дальше указать файл шрифтов.
Каждый браузер имеет свой формат. Мы используем форматы ttf, otf, eot, svg, woff.
OTF / TTF
Формат WOFF был создан как сжатая версия шрифтов OpenType и TrueType, так как эти форматы могут легко быть скопированы. Но OpenType имеет много возможностей, которые могут понадобиться веб-дизайнерам (например, лигатура и др.).
EOT
Embedded Open Type. Этот формат был создан разработчиками Microsoft (создатель @font-face) 15 лет назад. Это единственный формат, который поддерживается при использовании @font-face в версии IE8 и ниже.
SVG
Scalable Vector Graphics (Font). SVG - это векторное создание шрифта, которое имеет меньший размер шрифта, а также отлично подходит для мобильного использования. Это единственный формат, поддерживаемый версией 4.1 и ниже в Safari для iPhone.
WOFF
Web Open Font Format. Созданные разработчиками Mozilla совместно с другими и предназначенные для веб-использования, WOFF шрифты обычно загружаются быстрее других форматов, так как они используют сжатую версию структуры шрифтов OpenType (OTF) и TrueType (TTF).
Значение по умолчанию | Зависит от браузера. |
Применяется | Ко всем элемента, а также к ::first-letter и ::first-line |
Наследуется | Да |
Анимируемое | Нет |
Версия | CSS3 |
DOM синтаксис | object.style.fontFamily = "Verdana,sans-serif"; |
Синтаксис
@font-face {
font-properties
}
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
@font-face {
font-family: 'myFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
div {
font-family: myFont,sans-serif;
}
</style>
</head>
<body>
<h2>Пример @font-face</h2>
<div>
CSS правило @font-face at-rule определяет, с каким шрифтом отобразить текст. Шрифт может быть загружен с удаленного сервера или с локально установленного шрифта на компьютере пользователя. Если задана функция local(), указывающее какое название шрифта искать на пользовательском компьютере, и если пользовательский агент находит соответствие, то используется именно этот шрифт. В противном случае, будет загружен и использован ресурс шрифта, указанный в функции url()..
</div>
<p>
Правило @font-face может быть использовано не только на верхнем уровне CSS, но и внутри любого CSS правила conditional-group.
</p>
</body>
</html>
Значения
Описание шрифта | Значение | Описание |
---|---|---|
font-family | name | Устанавливает название шрифта. Необходимое значение. |
src | URL | Устанавливает URL откуда должен быть загружен шрифт. Необходимое значение. |
font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Определяет, каким образом шрифт должен быть растянут. Значение по умолчанию - normal. Дополнительное значение. |
font-style | normal italic oblique |
Устанавливает стиль шрифта. Значение по умолчанию - normal. Дополнительное значение. |
font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Устанавливает жирность шрифта. Значение по умолчанию - normal. Дополнительное значение. |
unicode-range | unicode-range | Определяет диапазон символов unicode, поддерживаемые шрифтом. Значение по умолчанию - U+0-10FFFF. Дополнительное значение. |
Поддержка браузера
4.0+ | 12.0+ | 3.5+ | 3.2+ | 10.0+ |