Знакомство с CSS Font Loading API
Почему именно он? Прежде всего, он хорошо поддерживается веб-браузерами, а это уже весомый повод познакомиться с ним. А во-вторых, он делает взаимодействие с кастомными шрифтами легче.
Перед тем, как показать что это такое, я хочу рассказать что же не так с @font-face. Если вы не понимаете о чем я, или просто хотите увидеть быстрый обзор возможностей API, то вот CodePen для вас.
До появления CSS Fonkt Loadlng API единственным способом использования кастомных шрифтов было добавление @font-face и установки шрифта в свойства font-family какого-то элемента.
Главным преимуществом и недостатком такого способа является то, что загрузка шрифтов происходит по необходимости.
Позвольте я вам расскажу: когда вы добавляете правило @font-face к вашему коду, в большинстве браузеров (IE8 исключения) ничего не происходит пока вы не используете этот шрифт. Это хорошо, ведь они не загружаются без надобности. А вот неудобство такого подхода в том, что мы не можем контролировать вид текста между запросом загрузки шрифта и его отражение, за нас это делают браузеры , а их поведение может существенно отличаться. Вот здесь нам и нужны CSS Fonkt Loadlng.
CSS Fontk Loadlng API позволяет нам добавлять шрифты, следить за их загрузкой и выбирать когда именно нужно их загружать. Если вы перед этим работали с Font Face Observer, то овладеть этим API будет очень просто.
Объявления и добавления FontFace
Его объявление очень похоже на @font-face: первый аргумент - это семья шрифта, второй - источник, откуда этот шрифт можно получить, а третий (не обязателен) описывает его стиль, толщину и тому подобное.
Загрузка
После объявления и придания шрифта, вы можете скачать его для использования на странице. Сделать это можно в любой момент выполнения вашего кода.
Отслеживание статуса
Добавление и загрузка была легкой, настоящее веселье начинается тогда, когда тебе нужно выбрать статус загрузки шрифтов, именно здесь мы можем решить что, как и когда.
[FontFace].status возвращает текущий статус шрифта (unloaded, loading, loaded или error)
Как только шрифт загрузится и будет готов к использованию, сработает Промис loaded:
Но так мы можем узнать когда загрузился один конкретный шрифт, как же отследить загрузки всех шрифтов? FontFaceSet имеет атрибут ready, что метит в себе Промис, который сработает когда загрузятся все шрифты на странице.
Просто, не так ли? После того как шрифты станут готовыми к использованию, вы можете установить их в font-family нужный элемент, или добавить класс, сделает это за вас. Все это я показал в этом CodePen. Конечно, это не все возможности, но обычно этого хватает. Более литературы я добавлю в конце статьи.
Конечно, для браузеров, не поддерживающих этот API, нужно тоже какое-то решение, и сейчас я не о Arial. Есть куда лучшие решения.
Если же этого вам недостаточно, попробуйте Font Face Observer.
Это круто, что мы получили нативный способ управления шрифтами, но он еще не полностью поддерживается, и это огорчает. А пока нам остается ждать, использовать полифилы, и еще раз ждать (свойство font-display).
Что не так с @font-face?
Как это работает?
CSS Fontk Loadlng API позволяет нам добавлять шрифты, следить за их загрузкой и выбирать когда именно нужно их загружать. Если вы перед этим работали с Font Face Observer, то овладеть этим API будет очень просто.
NotoSansRegular.load();