После увиденного мной в коде коллег неадекватного применения 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 шрифт, о порядке выбора локальных шрифтов стоит написать отдельный материал.
Надеюсь, мне удалось объяснить азы работы с коллекциями шрифтов и вы не будете больше писать код так, как мои коллеги. Осталось объяснить это им.
