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

Знакомство с CSS Font Loading API

  • 20.09.2017
  • 80
  • 0
0 -

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


Перед тем, как показать что это такое, я хочу рассказать что же не так с @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


Добавить комментарий