@font-face
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since иÑÐ»Ñ 2015 г..
* Some parts of this feature may have varying levels of support.
CSS @-пÑавило @font-face позволÑÐµÑ ÑказаÑÑ ÑÑиÑÑÑ Ð´Ð»Ñ Ð¾ÑобÑÐ°Ð¶ÐµÐ½Ð¸Ñ ÑекÑÑа на веб-ÑÑÑаниÑаÑ
, коÑоÑÑе могÑÑ Ð±ÑÑÑ Ð·Ð°Ð³ÑÑÐ¶ÐµÐ½Ñ Ð»Ð¸Ð±Ð¾ Ñ ÑдалÑнного ÑеÑвеÑа, либо Ñ ÐºÐ¾Ð¼Ð¿ÑÑÑеÑа полÑзоваÑелÑ. ÐÑли в пÑавиле бÑла обÑÑвлена ÑÑнкÑÐ¸Ñ local(), Ñ Ð½Ð°Ð·Ð²Ð°Ð½Ð¸ÐµÐ¼ ÑÑиÑÑа, Ñо бÑÐ´ÐµÑ Ð¿ÑоизводиÑÑÑÑ Ð¿Ð¾Ð¸Ñк на компÑÑÑеÑе полÑзоваÑелÑ, и в ÑлÑÑае обнаÑÑÐ¶ÐµÐ½Ð¸Ñ Ð±ÑÐ´ÐµÑ Ð¸ÑполÑзован ÑÑÐ¾Ñ ÑÑиÑÑ. ÐнаÑе бÑÐ´ÐµÑ ÑкаÑан и иÑполÑзован ÑÑиÑÑ, ÑказаннÑй в ÑÑнкÑии url(). @font-face позволÑÐµÑ ÑазÑабаÑÑваÑÑ ÐºÐ¾Ð½ÑÐµÐ½Ñ Ð½Ðµ огÑаниÑиваÑÑÑ Ð½Ð°Ð±Ð¾Ñом "безопаÑнÑÑ
" ÑÑиÑÑов (ÑÑиÑÑов, коÑоÑÑе наÑÑолÑко ÑаÑпÑоÑÑÑаненÑ, ÑÑо ÑÑиÑаÑÑÑÑ Ð´Ð¾ÑÑÑпнÑми по ÑмолÑаниÑ). ÐозможноÑÑÑ Ð¾Ð¿ÑеделиÑÑ Ð»Ð¾ÐºÐ°Ð»Ñно ÑÑÑановленнÑй ÑÑиÑÑ Ð¿Ð¾Ð·Ð²Ð¾Ð»ÑÐµÑ Ð±Ð¾Ð»ÐµÐµ гибко наÑÑÑаиваÑÑ ÑÑиÑÑÑ Ð½Ðµ полагаÑÑÑ Ð½Ð° Ñоединение Ñ Ð¸Ð½ÑеÑнеÑом.РаÑпÑоÑÑÑанÑннÑм ÑлÑÑаем ÑвлÑеÑÑÑ Ð¾Ð´Ð½Ð¾Ð²Ñеменное иÑполÑзование url() и local(), ÑÑÐ¾Ð±Ñ Ð¸ÑполÑзоваÑÑ Ð»Ð¾ÐºÐ°Ð»ÑнÑй ÑÑиÑÑ, еÑли он доÑÑÑпен, или инаÑе ÑкаÑаÑÑ ÐºÐ¾Ð¿Ð¸Ñ ÑÑиÑÑа.ÐÑо пÑавило Ð¼Ð¾Ð¶ÐµÑ Ð¸ÑполÑзоваÑÑÑÑ Ð½Ðµ ÑолÑко на веÑÑ
нем ÑÑовне CSS, но и внÑÑÑи лÑбого @-пÑавила.
@font-face {
font-family: "Open Sans";
src:
url("/proxy/developer.mozilla.org/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/proxy/developer.mozilla.org/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
СинÑакÑиÑ
Descriptors
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-адÑÐµÑ ÑаÑÐ¿Ð¾Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ ÑдалÑнного Ñайла ÑÑиÑÑа или Ð¸Ð¼Ñ ÑÑиÑÑа на компÑÑÑеÑе полÑзоваÑелÑ.
ЧÑÐ¾Ð±Ñ Ð´Ð°ÑÑ Ð±ÑаÑзеÑÑ Ð²Ð¾Ð·Ð¼Ð¾Ð¶Ð½Ð¾ÑÑÑ Ð²ÑбÑаÑÑ Ð½Ð°Ð¸Ð±Ð¾Ð»ÐµÐµ Ð¿Ð¾Ð´Ñ Ð¾Ð´ÑÑий ÑоÑÐ¼Ð°Ñ ÑÑиÑÑа, его можно ÑказаÑÑ Ð¿Ñи обÑÑвлении внÑÑÑи ÑÑнкÑии
format(): src: url(ideal-sans-serif.woff) format("woff"), url(basic-sans-serif.ttf) format("opentype");СпиÑок доÑÑÑпнÑÑ ÑоÑмаÑов:"woff","woff2","truetype","opentype","embedded-opentype", и"svg". unicode-range-
Ðиапазон Unicode кодов, коÑоÑÑй бÑÐ´ÐµÑ Ð¸ÑполÑзоваÑÑÑÑ Ð² ÑÑиÑÑе.
MIME-ÑÐ¸Ð¿Ñ ÑÑиÑÑов
| ФоÑÐ¼Ð°Ñ | MIME-Ñип |
|---|---|
| TrueType | font/ttf |
| OpenType | font/otf |
| Web Open File Format | font/woff |
| Web Open File Format 2 | font/woff2 |
ÐÑимеÑаниÑ
-
Ðеб ÑÑиÑÑÑ Ð¿Ð¾Ð¿Ð°Ð´Ð°ÑÑ Ð¿Ð¾Ð´ пÑавило огÑаниÑÐµÐ½Ð¸Ñ Ð´Ð¾Ð¼ÐµÐ½Ð° (ÑÐ°Ð¹Ð»Ñ ÑÑиÑÑов Ð´Ð¾Ð»Ð¶Ð½Ñ Ð½Ð°Ñ Ð¾Ð´Ð¸ÑÑÑÑ Ð½Ð° Ñом же Ñамом домене, ÑÑо и иÑполÑзÑÑÑÐ°Ñ Ð¸Ñ ÑÑÑаниÑа), еÑли ÑÑо огÑаниÑение не ÑнимаеÑÑÑ Ñ Ð¿Ð¾Ð¼Ð¾ÑÑÑ CORS.
-
@font-faceне Ð¼Ð¾Ð¶ÐµÑ Ð±ÑÑÑ Ð¾Ð±ÑÑвлен внÑÑÑи CSS-ÑелекÑоÑа. СледÑÑÑий пÑÐ¸Ð¼ÐµÑ Ð½Ðµ бÑÐ´ÐµÑ ÑабоÑаÑÑ:css.className { @font-face { font-family: "MyHelvetica"; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url("MgOpenModernaBold.ttf"); font-weight: bold; } }
ФоÑмалÑнÑй ÑинÑакÑиÑ
@font-face =
@font-face { <declaration-list> }
ÐÑимеÑÑ
ÐÑполÑзование загÑÑжаемого ÑÑиÑÑа
ÐÑÐ¾Ñ Ð¿ÑÐ¸Ð¼ÐµÑ ÑказÑÐ²Ð°ÐµÑ Ð·Ð°Ð³ÑÑжаемÑй ÑÑиÑÑ Ð´Ð»Ñ Ð¸ÑполÑÐ·Ð¾Ð²Ð°Ð½Ð¸Ñ Ð¸ пÑименÑÐµÑ ÐµÐ³Ð¾ ко вÑÐµÐ¼Ñ ÑÐµÐ»Ñ Ð´Ð¾ÐºÑменÑа:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Web Font Sample</title>
<style media="screen, print">
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("/proxy/mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
}
body {
font-family: "Bitstream Vera Serif Bold", serif;
}
</style>
</head>
<body>
ÐÑо ÑÑиÑÑ "Bitstream Vera Serif Bold" (он не поддеÑÐ¶Ð¸Ð²Ð°ÐµÑ ÐºÐ¸ÑиллиÑеÑкие
ÑимволÑ).
</body>
</html>
РезÑлÑÑÐ°Ñ Ð±ÑÐ´ÐµÑ Ñаким:
ÐÑполÑзование локалÑнÑÑ ÑÑиÑÑов
Ð ÑÑом пÑимеÑе иÑполÑзÑеÑÑÑ Ð»Ð¾ÐºÐ°Ð»ÑнÑй полÑзоваÑелÑÑкий ÑÑиÑÑ "Helvetica Neue Bold". ÐÑли Ñ Ð¿Ð¾Ð»ÑзоваÑÐµÐ»Ñ ÑÑÐ¾Ñ ÑÑиÑÑ Ð½Ðµ ÑÑÑановлен (поиÑк пÑоиÑÑ Ð¾Ð´Ð¸Ñ Ð¿Ð¾ Ð¿Ð¾Ð»Ð½Ð¾Ð¼Ñ Ð½Ð°Ð·Ð²Ð°Ð½Ð¸Ñ ÑÑиÑÑа и по Postscript-названиÑ), Ñогда вмеÑÑо него иÑполÑзÑеÑÑÑ Ð·Ð°Ð³ÑÑжаемÑй ÑÑиÑÑ "MgOpenModernaBold.ttf":
@font-face {
font-family: "MyHelvetica";
src:
local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
url("MgOpenModernaBold.ttf");
font-weight: bold;
}
СпеÑиÑикаÑии
| Specification |
|---|
| CSS Fonts Module Level 4 # font-face-rule |