|
Руст Кулматов
|
||||||||
|
Вариативные шрифты пока поддерживаются только в Сафари в последней версии Мак ОС и частично в Хроме. Поэтому использовать их на полную мощь пока рановато. Но уже можно готовиться и, заодно, экономить в тех браузерах, где поддержка уже есть. Один из плюсов вариативных шрифтов — вес. Например, каждое начертание шрифта Source Sans Pro весит от 35 до 87КБ. Вариативная версия весит 120КБ и содержит в себе все начертания. Используем это. Вариативные шрифты подключаются так же как обычные и настраиваются с помощью свойства |
Поддержка вариативных шрифтов | |||||||
@font-face {
font-family: 'Secret Font';
src: url(files/fonts/secretfont-variable.woff2) format("woff2-variations");
}
.example {
font-family: 'Secret Font';
font-variation-settings: "wdth" 1000, "wght" 400;
/* wdth задаёт ширину шрифта, а wght — вес */
}
.example h1 {
font-variation-settings: "wght" 700;
}
|
Старые браузеры такого не понимают, поэтому для них определим набор обычных начертаний: |
||||||||
@font-face {
font-family: 'Secret Font';
src: url(files/fonts/secretfont-light.woff2) format("woff2");
font-weight: 100;
}
@font-face {
font-family: 'Secret Font';
src: url(files/fonts/secretfont-200.woff2) format("woff2");
font-weight: 200;
}
@font-face {
font-family: 'Secret Font';
src: url(files/fonts/secretfont-300.woff2) format("woff2");
font-weight: 300;
}
@font-face {
font-family: 'Secret Font';
src: url(files/fonts/secretfont-regular.woff2) format("woff2");
font-weight: 400;
}
/* и так далее */
|
А теперь совместим, спрятав новые правила от старых браузеров с помощью директивы |
||||||||
<!-- index.html -->
<div class="example">
<h2>Вихревой электрон</h2>
<p>Скрытый смысл, несмотря на внешние воздействия,
изящно диссонирует контрапункт.</p>
</div>
/* style.css */
@font-face {
font-family: 'Secret Font';
src: url(secretfont-light.woff) format("woff");
font-weight: 100;
}
/* ... */
@supports (font-variation-settings: "wght" 1) {
@font-face {
font-family: 'SecretFont Variable';
src: url(secretfont-variable.woff2) format("woff2-variations");
}
}
.example {
font-family: 'Secret Font';
font-size: 50px;
}
.example h2 {
font-weight: bold;
}
@supports (font-variation-settings: "wght" 1) {
.example {
font-family: 'SecretFont Variable';
font-variation-settings: "wght" 400;
}
.example h2 {
font-weight: normal;
font-variation-settings: "wght" 700;
}
}Вихревой электрон
Скрытый смысл, несмотря на внешние воздействия, изящно диссонирует контрапункт.
|
В Хроме и Сафари будут работать все промежуточные значения. Фаерфокс и Эдж будут округлять шрифт до ближайшего определённого начертания: |
||||||||