После увиденного мной в коде коллег неадекватного применения font-face:
font-weight: normal;
font-family: BrutalType-Bold, sans-serif;я понял, что что-то не так в датском королевстве. Скорее всего в одной статье всего не объять, но давайте просто начнём.
Допустим, собрались вы в 2021 году подключить шрифт. Начитавшись про то, как же всё плохо (на самом деле, нет) с сервисом Google Fonts, решили подключать локально. Приобрели (естественно) пакет шрифтов, распаковали и увидели следующее:
Зрелище не для слабонервных, понятное дело. Сразу же возникает вопрос, как с этим быть (конвертацию и лицензирование оставим на потом). А ответ на него – @font-face.
При работе со шрифтами в CSS выделяют несколько понятий: семейство (font-family), насыщенность (начертание, font-weight), стиль (font-style), плотность (растяжение, font-stretch), вариант (font-variant) и кегль (размер, font-size).
Важно понимать: @font-face это не подключение файла шрифта буквально, а описание конкретного набора всех вышеупомянутых свойств для загруженного файла, до которого можно достучаться через обращение к ним же в правилах CSS нужных элементов.
Итак, давайте начнём с указания стиля, здесь вариантов три: normal, italic и oblique. Между italic и oblique разницу не все понимают и далеко не всегда их вообще разделяют. Если коротко, italic – это не только наклон, но и изменение внешнего вида шрифта, вплоть до лигатур (объединения символов), а oblique – те же символы, но под наклоном. И то и то в русском языке чаще всего называют курсивом.
Выходит, в реальной жизни нам остаются два: normal и italic. Если вы видите в названии шрифта слово Italic или аббревиатуру It – это “курсив”, italic (MyriadPro-BoldSemiCnIt.otf, MyriadPro-It.otf). Oblique же задаётся аббревиатурой Ob (Obl), но вряд ли вы это где-то увидите.
Дальше идёт начертание. В CSS принято использовать числовые значения от 100 до 900 по степени увеличения насыщенности или же текстовые: normal (400), bold (700). Существуют ещё bolder и lighter, но они работают от наследуемого свойства и использовать их в @font-face не стоит!
В названиях шрифтов это обычно выражается так: Light (100, MyriadPro-Light.otf), Book (300), Regular (400, MyriadPro-Regular.otf), Medium (500), Semibold (600), Bold (700, MyriadPro-Bold.otf), Black (Solid, 900, MyriadPro-BlackCond.otf). Зачастую Black является отдельным семейством, но тут кому как. Естественно, истинные названия и соответствия остаются на усмотрение разработчика шрифта.
Следующее – font-stretch, плотность шрифта. Его широкость-узкость, если хотите. И здесь-то настоящее раздолье: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded (от наиболее узкого к наиболее широкому).
Как вы уже могли догадаться, действует то же правило аббревиатур: Cond, Cn – condensed (узкий, MyriadPro-Cond.otf, MyriadPro-LightCond.otf), SemiCond, SemiCn – semi-condensed (полусжатый, MyriadPro-SemiCn.otf), SemiExt – semi-extended (полуширокий, MyriadPro-SemiExtIt.otf) и так далее.
Остаётся font-variant, но у него всего два варианта: normal и small-caps (когда строчные буквы выглядят как уменьшенные прописные). Здесь с аббревиатурой не угадаешь, предлагайте ваши варианты в комментариях.
Давайте разберём пример подключения. Определим базовый шрифт для двух видов контейнеров (woff2 и opentype/otf):
@font-face {
font-family: MyriadPro;
src: url(MyriadPro-Regular.woff2) format(woff2),
url(MyriadPro-Regular.otf) format(opentype);
font-weight: 400;
font-style: normal;
font-stretch: normal;
font-variant: normal;
}И какие-нибудь наиболее вычурные варианты:
@font-face {
font-family: MyriadPro;
src: url(MyriadPro-BlackSemiExtIt.woff2) format(woff2),
url(MyriadPro-BlackSemiExtIt.otf) format(opentype);
font-weight: 900;
font-style: italic;
font-stretch: semi-extended;
font-variant: normal;
}
@font-face {
font-family: MyriadPro;
src: url(MyriadPro-BlackSemiCn.woff2) format(woff2),
url(MyriadPro-BlackSemiCn.otf) format(opentype);
font-weight: 900;
font-style: normal;
font-stretch: semi-condensed;
font-variant: normal;
}Как видим, ничего сложного. Семейство всегда одно! Это можно применять как угодно, хоть объединить несколько разных шрифтов в группу “MyBestSiteDuckingFontEver”.
И применяем:
.ex-heart {
font-family: MyriadPro, sans-serif;
font-weight: 900;
font-stretch: semi-extended;
font-style: italic;
}
.ex-soul {
font-family: MyriadPro, sans-serif;
font-weight: 900;
font-stretch: semi-condensed;
font-style: normal;
}К первому классу применится файл MyriadPro-BlackSemiExtIt.woff2 (или otf, в зависимости от поддержки), а ко второму – MyriadPro-BlackSemiCn.woff2. Если не будет ни того, ни другого, то сбросится до MyriadPro-Regular.woff2. Здесь нужно быть внимательным: браузеры любят издеваться над шрифтами и пытаться сделать их жирнее или наклоннее, чем они есть. Особенно славится этим Chrome.
Если и Regular-файл не будет найден, то используется системный sans-serif шрифт, о порядке выбора локальных шрифтов стоит написать отдельный материал.