Загрузка веб-шрифтов с помощью загрузчика

Загрузка веб-шрифтов с помощью загрузчика

От автора: в данной статье мы рассмотри загрузку веб-шрифтов с помощью загрузчика. Несколько лет назад разработчики сошлись на том, что шрифты должны быть скрыты до полной загрузки соответствующих файлов. Многие дизайнеры спорили с разработчиками и утверждали, что способ загрузки шрифтов по умолчанию, который носит название «Мигание нестилизованного текста» или МНТ, раздражает пользователей. Метод заключается в том, что пока не загрузился кастомный шрифт, его подменяет стандартный типа Georgia. Более последовательно было бы просто подождать, пока сайт загрузится полностью, а не наблюдать, как один шрифт перескакивает на другой.

Но сегодня все споры ушли в прошлое. Сейчас появилась новая практика – скрывать весь текст, к которому применены кастомные шрифты до полной загрузки файлов шрифтов. Называется такой метод «Мигание скрытого текста» или МСТ. Эту технику часто называют самым худшим из вариантов. Scott Jehl говорит, что этот метод плох как с точки зрения производительности, так и юзабилити:

«Как правило, больше всего проблем с МСТ бывает в браузерах iOS Safari, которые умудряются скрывать текст на 30 секунд и, в конце концов, отображают его стандартным шрифтом. Похожий эффект, но с меньшим временем задержки можно наблюдать в браузерах Chrome, Firefox и Opera.»

В справке на сайте Typekit по этой проблеме говорится похожим образом «Метод МНТ более приспособлен для моментального использования веб-сайта, особенно на медленных соединениях». И как дизайнерам и разработчикам нам необходимо выбрать что-то одно, МНТ или МСТ.

Мигание скрытого текста

Файл шрифта начинает загружаться

Текст полностью невидим, пока не загрузится шрифт

Время течет медленно

Шрифт, наконец, загружается

Появляется текст

Мигание нестилизованного текста

Файл шрифта начинает загружаться

Текст отображается шрифтом, указанным в font-family

Шрифт загружается

Фолбэк заменяется нужным веб-шрифтом

Различия между этими двумя методами просто колоссальные. Scott также говорит, что с МСТ подходом текст на сайте Filament Group отображается через 2.7 секунды на 3G соединении, а с МНТ через 0.6. Если перед нами стоит задача обеспечить максимальную скорость интерфейса, то необходимо использовать МНТ. Этот метод сосредоточен на производительности сети и обеспечении положительного пользовательского опыта.

Проблемы в методе МНТ

У данного метода, естественно, есть несколько недостатков. К примеру, из-за сильных различий в свойствах font-weight и x-height при смене со стандартного шрифта на пользовательский текст может прыгать или сильно поехать. Т.е. если компания хочет использовать для общения какой-либо свой брендовый шрифт, то с методом МНТ это становится нереальным.

Иногда такие недостатки можно сгладить. Взгляните, к примеру, на сайт Bram Stein. Момент смены стандартного шрифта на кастомный очень быстрый, и форматирование текста почти не меняется. Если же мы не можем подобрать похожий по размерам стандартный шрифт, то придется воспользоваться SVG.

Рассмотрим метод МНТ

В последнее время я экспериментировал с загрузчиком Web Font Loader. Данный загрузчик позволяет контролировать все этапы отображения текста в МНТ. Сперва, необходимо вставить код загрузчика в разметку:

(function(d) {
  var wf = d.createElement('script'), s = d.scripts[0];
  wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js';
  s.parentNode.insertBefore(wf, s);
})(document);

Скрипт загружается асинхронно, т.е. код можно добавить прямо перед закрывающим тегом body или в head. Остальные ресурсы не будут заблокированы. Данный метод не поддерживается в IE9, но если это не столь важно, то можно заменить на:

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js" async></script>

После подключения скрипта необходимо добавить наш шрифт. В этом побочном проекте я поэкспериментировал со шрифтами через @font-face с сайта Typonine, которые добавляются через link в header сайта:

<link rel="preconnect" href="https://fonts.typonine.com/" crossorigin>

Preconnect тут очень полезен, он автоматически делает сетевое рукопожатие; перед запросом шрифта из нашего скрипта у нас уже есть информация, необходимая браузеру для загрузки соответствующих ресурсов. Процесс загрузки становится чуть-чуть быстрее. (Спасибо Ilya Grigorik за подсказку использовать атрибут crossorigin). Теперь с помощью объекта WebFontConfig можно начать проверять, загрузился ли наш шрифт или нет:

WebFontConfig = {
  custom: {
    families: [
      'Nocturno Display Medium 3',
      'Nocturno Book 2',
      'Nocturno Regular Italic 24',
      'Nocturno Regular 26',
      'Nocturno Regular 25'
    ],
    urls: [
      'https://fonts.typonine.com/WF-000000-001254.css',
      'https://fonts.typonine.com/WF-000000-001255.css'
    ]
  },
  timeout: 2000
};

Объект custom говорит Web Font Loader, что мы хотим загрузить шрифты с внешних стилей. В данном загрузчике, если нам понадобится, можно воспользоваться шрифтами с сайтов Typekit, Google, Fontdeck и Fonts.com. В массиве families задаются все имена шрифтов, которые будут использоваться в CSS font-family.

Вы могли заметить, что я установил задержку timeout в 2 секунды. Это просто выдуманное мной число. Я думаю двух секунд должно хватить на запрос к сети – даже на медленных соединениях, когда пользователям нужен хоть какой-то контент. После загрузки файлов шрифтов тегу html будет присвоен класс:

<html class="wf-nocturnoregularitalic24-n4-active wf-nocturnoregular26-n4-active wf-nocturnoregular25-n4-active wf-nocturnodisplaymedium3-n4-active wf-nocturnobook2-n4-active wf-active">
   <!—разметка сайта -->
</html>

Эти классы нам пригодятся, чтобы задавать стили в зависимости от того, загрузились ли шрифты или нет. Существуют и дополнительные классы, которые также могут нам помочь:

loading: добавляется, когда были запрошены все шрифты.

active: добавляется, когда шрифты отобразились на странице.

Inactive: добавляется, когда браузер не поддерживает заданные шрифты или шрифты не могут быть загружены.

Fontloading: добавляется для каждого загруженного шрифта.

fontactive: добавляется для каждого отображенного шрифта.

Fontinactive: добавляется если шрифт не может быть загружен.

Теперь в стилях можно задать необходимое семейство шрифтов в классе .wf-active:

$fallback: Georgia, serif;

h1, .h1 {
  font-family: $fallback;

  .wf-active & {
    font-family: "Nocturno Display Medium 3";
  }
}

Первым делом пользователи увидят шрифт из переменной $fallback, но как только с помощью Web Font Loader будет добавлен наш класс .wf-active, шрифты переключатся на наши. Теперь необходимо воспользоваться техникой прогрессивного улучшения.

Разбираемся с проблемами

Одна из проблем, которую я заметил, заключалась в следующем. После загрузки и применения шрифта в строках менялось количество слов, а отдельные элементы становились или очень широкими, или наоборот очень узкими. Чтобы это исправить, можно установить разные значения font-size и line-height для стандартных и кастомных шрифтов:

h1, .h1 {
  font-size: 30px;
  line-height: 35px;
  font-family: Georgia, serif;

  .wf-active & {
    font-size: 26px;
    line-height: 30px;
    font-family: "Nocturno Display Medium 3";
  }
}

Минимизируем эффект мигания нестилизованного текста

После первой загрузки Filament Group рекомендуют установить куки, чтобы текст не мигал после каждого применения класса .wf-active. Но в моем эксперименте я использовал обычную статичную разметку, и куки были недоступны. Вместо этого, чтобы обновить значение sessionStorage, я воспользовался одним из множества событий, которые есть в Web Font Loader:

WebFontConfig = {
  // дополнительные опции
  active: function() {		
    sessionStorage.fonts = true;
  }
}

Не забудьте взглянуть на полный список доступных событий. С помощью этого события мы можем быстро проверить в шапке сайта, а существует ли данный ключ в sessionStorage. Если да, то тегу html моментально присваивается соответствующий класс:

<head>
  <script>
    (function() {
      if (sessionStorage.fonts) {
        console.log("Fonts installed.");
        document.documentElement.classList.add('wf-active');
      } else {
        console.log("No fonts installed.");
      }
    })();
  </script>
</head>

Данный способ не способен полностью убрать мигание текста. Проблема будет актуально еще долгое время. Однако данный подход значительно улучшает МСТ.

Для хорошей типографики загрузка шрифтов крайне важна

Эксперименты с данным методом полностью изменили мое мнение о том, что такое хорошая типографика. Если у вас есть предложения по улучшению описанного выше метода, оставляйте их в комментариях.

Автор: Robin Rendle

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: , ,

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree