@font-face¶
Правило @font-face
позволяет авторам указывать онлайн-шрифты для отображения текста на своих веб-страницах.
Позволяя авторам предоставлять свои собственные шрифты, @font-face
устраняет необходимость зависеть от ограниченного количества шрифтов, установленных пользователями на их компьютерах.
@-правила
Шрифт и Цвет
- @font-face
- font
- font-family
- font-feature-settings
- font-kerning
- font-language-override
- font-optical-sizing
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-synthesis
- font-variant
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- font-variation-settings
- font-weight
- line-height
Синтаксис¶
@font-face {
font-family: 'Open Sans';
src: url('/fonts/OpenSans-Regular-webfont.woff2') format('woff2'),
url('/fonts/OpenSans-Regular-webfont.woff') format('woff');
}
Дескрипторы правила¶
font-display
- Определяет способ отображения шрифта в зависимости от того, будет ли он загружен и готов к использованию.
font-family
- Указывает имя, которое будет использоваться в качестве значения шрифта для свойств шрифта.
font-stretch
- Значение
font-stretch
. font-style
- Значение
font-style
. font-weight
- Значение
font-weight
. font-variant
- Значение
font-variant
. font-feature-settings
- Позволяет управлять расширенными типографскими функциями в шрифтах OpenType.
font-variation-settings
- Позволяет контролировать уровень шрифтов OpenType или TrueType на низком уровне, указывая имена четырех буквенных имен функций, которые могут меняться, вместе с их значениями.
src
- Задает ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения файла шрифта или имя шрифта на компьютере пользователя.
unicode-range
- Диапазон кодов Unicode используемые из шрифта.
Спецификации¶
Поддержка браузерами¶
Пример¶
<html>
<head>
<title>Web Font Sample</title>
<style type="text/css" media="screen, print">
@font-face {
font-family: 'Bitstream Vera Serif Bold';
src: url('https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf');
}
body {
font-family: 'Bitstream Vera Serif Bold', serif;
}
</style>
</head>
<body>
This is Bitstream Vera Serif Bold.
</body>
</html>
@font-face {
font-family: MyHelvetica;
src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}