Внутри @font‑face доступно много других свойств для настройки подключения и отображения шрифта
@font‑face. МДН
Нестандартные шрифты подключаются к странице правилом @font-face. В минимальном варианте указывают ссылку на файл, свойства начертания в этом файле и название шрифта, по которому затем его используют в коде:
Внутри @font‑face доступно много других свойств для настройки подключения и отображения шрифта
@font‑face. МДН
@font-face {
font-family: 'MyCustomFont';
/* В файле начертание c обычной жирностью */
src: url('./fonts/mcf-regular.woff2') format('woff2');
/* Файл применится, если в стилях указана обычная жирности шрифта */
font-weight: 400;
}
body {
/* Шрифт применится ко всем элементам страницы с обычной жирностью */
font-family: 'MyCustomFont', system-ui;
}
Дополнительные начертания описываются в отдельных @font-face.
Неправильная работа с начертаниями
Неправильно указывать уникальное название шрифта для каждого начертания. Это сделает дальнейшую работу крайне неудобной: код превратится в кашу с кучей повторов, высоким риском опечаток и конфликтов.
Нельзя будет комбинировать свойства шрифта, чтобы получить нужное начертание. Не будут работать стандартные стили жирности и курсива, например, у заголовков и тега‑курсива i. Придётся настраивать начертания вручную для каждого типа и сочетания элементов.
Не делайте так:
/* Каша начинается уже в момент объявления начертаний. Чем их больше — тем тяжелее получится код */
@font-face {
font-family: 'MyCustomFontRegular';
src: url('./fonts/mcf-regular.woff2') format('woff2');
}
@font-face {
font-family: 'MyCustomFontRegularItalic';
src: url('./fonts/mcf-regular-italic.woff2') format('woff2');
}
@font-face {
font-family: 'MyCustomFontBold';
src: url('./fonts/mcf-bold.woff2') format('woff2');
}
@font-face {
font-family: 'MyCustomFontBoldItalic';
src: url('./fonts/mcf-bold-italic.woff2') format('woff2');
}
@font-face {
font-family: 'MyCustomFontLight';
src: url('./fonts/mcf-light.woff2') format('woff2');
}
@font-face {
font-family: 'MyCustomFontLightItalic';
src: url('./fonts/mcf-light-italic.woff2') format('woff2');
}
body {
font-family: 'MyCustomFontRegular', system-ui;
}
/* Сразу же появятся громоздкие конструкции с повторами и высоким риском опечаток */
.light {
font-family: 'MyCustomFontLigth', system-ui;
}
.bold {
font-family: 'MyCustomFontBold', system-ui;
}
.italic {
font-family: 'MyCustomFontRegularItalic', system-ui;
}
/* Вместо использования стандартных стилей, придётся вручную проставлять начертания элементам типографики */
h1,
h2,
h3 {
font-family: 'MyCustomFontBold', system-ui;
}
i,
em {
font-family: 'MyCustomFontRegularItalic', system-ui;
}
/* Отдельный ад — вручную прописывать все возможные комбинации начертаний */
h1, h2, h3 :is(i, em) {
font-family: 'MyCustomFontBoldItalic', system-ui;
}
.light.italic {
font-family: 'MyCustomFontLightItalic', system-ui;
}
.bold.italic {
font-family: 'MyCustomFontBoldItalic', system-ui;
}
Правильная работа с начертаниями
Правильно — указать единое название шрифта и отличающиеся свойства для каждого начертания. Код получается проще, выразительнее и надёжнее. Шрифт применяется один раз, а затем лишь уточняются свойства отдельных элементов. Браузер сам найдёт и применит файлы с соответствующими свойствам начертаниями.
Этот способ дружит с особенностями ЦСС: свойства можно комбинировать, наследовать и переопределять, автоматически получая нужные начертания. Будут работать и стандартные браузерные стили. Так для вложенного в заголовок тега‑курсива i применится жирное курсивное начертание благодаря стандартным свойствам font-weight и font-style у этих элементов. Вам не придётся поддерживать такие случаи вручную.
Делайте так:
@font-face {
font-family: 'MyCustomFont';
src: url('./fonts/mcf-regular.woff2') format('woff2');
font-weight: 400;
}
@font-face {
font-family: 'MyCustomFont';
src: url('./fonts/mcf-regular-italic.woff2') format('woff2');
/* Начертание применится при font-weight: 400 и font-style: italic */
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'MyCustomFont';
src: url('./fonts/mcf-bold.woff2') format('woff2');
font-weight: 600;
}
@font-face {
font-family: 'MyCustomFont';
src: url('./fonts/mcf-bold-italic.woff2') format('woff2');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'MyCustomFont';
src: url('./fonts/mcf-light.woff2') format('woff2');
font-weight: 300;
}
@font-face {
font-family: 'MyCustomFont';
src: url('./fonts/mcf-light-italic.woff2') format('woff2');
font-weight: 300;
font-style: italic;
}
body {
font-family: 'MyCustomFont', system-ui;
}
/* Не придётся вручную описывать сочетания классов, ЦСС скомбинирует стили и элемент получит соответствующее начертание */
.light {
font-weight: 300;
}
.bold {
font-weight: 600;
}
.italic {
font-style: italic;
}
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.