Как улучшить производительность страницы с помощью Font Loader

Большое спасибо Jason Pamental за вдохновение написать эту статью. Я бы никогда не подумал об этом!

Когда вы в последний раз использовали Arial, Times New Roman, Helvetica или … Shudder … Comic Sans на своих веб-страницах? Веб-шрифты заняли слишком много времени, но, как только они появились, мы никогда не оглядывались назад. Шрифты забавны, (часто) бесплатны и быстро реализуются:

@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic); 

Затем вы можете использовать шрифт на всех ваших страницах, например

 body { font-family: Ubunutu, sans-serif; font-weight: 400; } 

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

Или они?

После изображений шрифты обычно являются самыми большими активами на вашей веб-странице. Приведенный выше шрифт Ubuntu добавляет почти 250 Кбайт к весу страницы, что заметно на медленных мобильных соединениях. Chrome, IE, Safari и Opera оставляют пустое место, пока шрифт загружен, поэтому страница не может быть использована. Firefox и более ранние версии Opera отображают текст в качестве резервного шрифта, а затем переключаются — это называется Flash of Unstyled Text (FOUT). Ни один из вариантов не идеален.

Мы редко беспокоимся о проблемах с весом шрифта и оправдываемся, например, «это проблема только на первой странице» или «многие пользователи будут кэшировать шрифт» . Мы можем опустить менее используемые шрифты; например, удаление большинства стилей курсива Ubuntu экономит почти 40%. Мало кто решается принять очевидное решение с использованием стандартных шрифтов ОС — наши клиенты и дизайнеры никогда не простят нас.

Веб-шрифт JavaScript

К счастью, есть еще один вариант: webfontloader . Эта библиотека JavaScript может загружать шрифты из Google , Typekit , Fonts.com , Fontdeck или с вашего собственного сервера в фоновом режиме после загрузки страницы. Сама библиотека добавляет еще 17 КБ на страницу, но она также загружается как фоновый процесс.

Чтобы загрузить шрифт Ubuntu, указанный выше, мы создаем глобальный объект с именем WebFontConfig который определяет наши шрифты и настройки, а затем загружаем сам webfontloader:

 var WebFontConfig = { google: { families: [ 'Ubuntu:400,300,400italic,300italic,500italic,500,700,700italic:latin' ] }, timeout: 2000 }; (function(){ var wf = document.createElement("script"); wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.async = 'true'; document.head.appendChild(wf); })(); 

Поэтому мы можем определить, загружен ли один, некоторые или все шрифты, в зависимости от устройства и пропускной способности. В идеале мы могли бы использовать API Network Information, но поддержка браузера остается ограниченной. В качестве альтернативы обратите внимание на настройку timeout в WebFontConfig ; если для загрузки файлов шрифтов требуется более двух секунд, запрос отменяется.

CSS Callbacks

Webfontloader применяет имена классов к элементу html во время работы:

• .wf-loading — все шрифты были запрошены
• .wf-active — все шрифты доступны
• .wf-inactive — ни один из шрифтов не может быть загружен

Классы также применяются для отдельных шрифтов:

• .wf-<familyname>-<fvd>-loading — запрошен один шрифт
• .wf-<familyname>-<fvd>-active — доступен один шрифт
• .wf--<familyname>-<fvd>-inactive — невозможно загрузить один шрифт

где <familyname> — <familyname> версия имени шрифта, а <fvd> — описание варианта, например, i4 для курсива весом 400.

Это позволяет нам переключать шрифты после их загрузки — так же, как работает Firefox, например

 /* default OS fonts */ body { font-family: arial, sans-serif; } /* fonts now loaded */ .wf-active body { font-family: 'Ubuntu'; } 

Обратные вызовы JavaScript

Подобные функции обратного вызова JavaScript могут быть определены в WebFontConfig хотя есть меньше ситуаций, когда это полезно, например,

 var WebFontConfig = { google: { families: [ 'Ubuntu:400,300,400italic,300italic,500italic,500,700,700italic:latin' ] }, timeout: 2000, loading: function() {}, active: function() {}, inactive: function() {}, fontloading: function(familyName, fvd) {}, fontactive: function(familyName, fvd) {}, fontinactive: function(familyName, fvd) {} }; 

Для получения дополнительной информации обратитесь к документации по webfontloader .

Минимизация FOUT

Вспышка нестабильного текста вызывает дрожь, если ваш запасной шрифт значительно отличается по стилю, весу или расстоянию от веб-шрифта. Однако, немного поэкспериментировав, вы можете настроить запасной шрифт, вес, высоту строки и поля, чтобы элементы страницы оставались примерно в одном и том же месте при загрузке веб-шрифта…

 <button onclick="document.documentElement.classList.toggle('wf-active');return false;">toggle styles</button>