Знакомство с CSS Font Loading API » WebFonts.pro

Почему именно он? Прежде всего, он хорошо поддерживается веб-браузерами, а это уже весомый повод познакомиться с ним. А во-вторых, он делает взаимодействие с кастомными шрифтами легче.Перед тем, как показать что это такое, я хочу рассказать что же не так с @font-face. Если вы не понимаете о чем я, или просто хотите увидеть быстрый обзор возможностей API, то вот CodePen для вас.

Что не так с @font-face?

До появления 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: первый аргумент — это семья шрифта, второй — источник, откуда этот шрифт можно получить, а третий (не обязателен) описывает его стиль, толщину и тому подобное.ЗагрузкаПосле объявления и придания шрифта, вы можете скачать его для использования на странице. Сделать это можно в любой момент выполнения вашего кода.

NotoSansRegular.load();

Отслеживание статусаДобавление и загрузка была легкой, настоящее веселье начинается тогда, когда тебе нужно выбрать статус загрузки шрифтов, именно здесь мы можем решить что, как и когда.[FontFace].status возвращает текущий статус шрифта (unloaded, loading, loaded или error)Как только шрифт загрузится и будет готов к использованию, сработает Промис loaded:Но так мы можем узнать когда загрузился один конкретный шрифт, как же отследить загрузки всех шрифтов? FontFaceSet имеет атрибут ready, что метит в себе Промис, который сработает когда загрузятся все шрифты на странице.Просто, не так ли? После того как шрифты станут готовыми к использованию, вы можете установить их в font-family нужный элемент, или добавить класс, сделает это за вас. Все это я показал в этом CodePen. Конечно, это не все возможности, но обычно этого хватает. Более литературы я добавлю в конце статьи.

Поддержка браузерами

Конечно, для браузеров, не поддерживающих этот API, нужно тоже какое-то решение, и сейчас я не о Arial. Есть куда лучшие решения.Если же этого вам недостаточно, попробуйте Font Face Observer.Это круто, что мы получили нативный способ управления шрифтами, но он еще не полностью поддерживается, и это огорчает. А пока нам остается ждать, использовать полифилы, и еще раз ждать (свойство font-display).скачать dle 11.3