Руководство пользователя Отмена

События шрифтов

Поиск

Последнее обновление 21 мая 2021 г.

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

События шрифтов пока недоступны для загрузки шрифтов CSS. Если вы используете код встраивания по умолчанию или @Код встраивания для CSS на своем веб-сайте, то вы можете включить другую библиотеку JavaScript для настройки загрузки шрифта.

Использование событий шрифтов в CSS

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

Существует три основных события шрифтов, каждое из которых имеет соответствующее имя класса (в скобках):

loading (.wf-loading): выполняется загрузка веб-шрифтов
active (.wf-active): веб-шрифты активны
inactive (.wf-inactive): веб-шрифты неактивны

Классы CSS, связанные с этими событиями, добавляются к элементу HTML во время загрузки. Их можно использовать в таблицах стилей для управления стилем страницы при загрузке шрифтов. Например:

.wf-loading {
/* styles to use when web fonts are loading */
}

.wf-active {
/* styles to use when web fonts are active */
}

.wf-inactive {
/* styles to use when web fonts are inactive */
}

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

События шрифтов JavaScript

Эти события шрифтов также доступны как обработчики обратного вызова JavaScript по методу Typekit.load. Вы можете передать объект, содержащий функции обратного вызова, при вызове Typekit.load, и эти функции обратного вызова будут активироваться при возникновении различных событий шрифта во время загрузки. Например:

<script>
  try {
    Typekit.load({
      loading: function() {
        // JavaScript to execute when fonts start loading
      },
      active: function() {
        // JavaScript to execute when fonts become active
      },
      inactive: function() {
        // JavaScript to execute when fonts become inactive
      }
    })
  } catch(e) {}
</script>

Функции обратного вызова JavaScript могут использоваться для добавления таких эффектов как медленное появление при загрузке шрифтов или для выполнения сложного математического изменения размера презентационных макетов в зависимости от размеров визуализированного текста.

В дополнение к этим базовым событиям шрифтов также предоставляются более детализированные события шрифтов для отдельных вариантов шрифтов. Имена классов для этих событий представляют собой комбинацию названия семейства шрифтов, описания варианта шрифта, и названия событий шрифтов. Так, например, добавление к проекту шрифта Gesta нормальной толщиной 400 приведет к появлению классов событий шрифтов, таких как wf-gesta-n4-loading и wf-gesta-n4-active. На стороне JavaScript доступны обратные вызовы fontloading, fontactive и fontinactive, которые могут передавать семейство шрифтов и описание шрифта для каждого отдельного варианта.

Использование событий шрифтов: управление кратковременным показом нестилизованного текста (FOUT)

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

Во время загрузки шрифтов к элементу HTML применяется класс .wf-loading. После загрузки шрифтов этот класс меняется на .wf-active. Таким образом, вы можете добавить в свои таблицы стилей следующее:

.wf-loading h1 {
/* styles to use while fonts are loading */
}

.wf-active h1 {
/* styles to use after fonts have loaded */
}

Затем вы можете настроить свои стили, чтобы уменьшить эффект FOUT, например, выбрав примерно одинаковый размер кратковременно отображаемого шрифта и загруженного веб-шрифта. Также вы можете скрыть свой текст до полного завершения загрузки шрифта. Например:

<style>
.wf-loading h1 {
font-family: "droid-sans";
visibility: hidden;
}
.wf-active h1 {
visibility: visible;
}
</style>

<body>
<h1>This headline will be hidden until Droid Sans is completely loaded.</h1>
</body>

В разделе выбор стилей резервных текстов вы найдете дополнительные примеры настройки стилей CSS с использованием событий шрифтов.

Использование событий шрифтов: выбор стилей резервных шрифтов

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

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

.headline {
/* These fallback styles are used by default */
font-family: Arial, sans-serif;
font-size: 18px; /* Smaller size for non-condensed fallback font */
}

.wf-active .headline {
/* These styles are used when web fonts are active */
font-family: "proxima-nova-extra-condensed",Arial, sans-serif;
font-size: 24px;  /* Larger size for condensed font */
}

Использование событий шрифтов: моделирование кратковременного отображения невидимого текста (FOIT) для динамических проектов

По умолчанию динамические проекты будут отображать текст, использующий веб-шрифты, с кратковременным показом нестилизованного текста (FOUT). Это означает, что браузер будет отображать резервные шрифты во время загрузки веб-шрифтов, а затем переключится на веб-шрифты, когда они станут доступны для использования. При использовании альтернативного подхода к рендерингу веб-шрифтов браузер будет скрывать текст во время загрузки веб-шрифтов, а затем отображать текст, стилизованный с использованием веб-шрифта, после завершения загрузки. Это называют кратковременным отображением невидимого текста (FOIT).

Использование подхода FOUT ускоряет вывод страниц, особенно при медленных сетевых подключениях, но если выбрать подход FOIT, то вы сможете выполнять его моделирование во всех браузерах с использованием событий шрифтов. События шрифтов — это три класса, которые добавляются к элементу:

.wf-loading: Добавляется при загрузке шрифтов;
.wf-active: Добавляется при загрузке как минимум одного шрифта;
.wf-inactive: Добавляется при отсутствии загруженных шрифтов.

Вы можете использовать эти три класса в своем CSS для моделирования загрузки FOIT, скрывая текст, когда активен класс wf-loading, и показывая текст, когда активен класс wf-active или wf-inactive:

.wf-loading {
/* styles to use when web fonts are loading */
}

.wf-active {
/* styles to use when web fonts are active */
}

.wf-inactive {
/* styles to use when web fonts are inactive */
}

Например, если элементы h1 и p используют веб-шрифт, используйте этот CSS, чтобы скрыть их во время загрузки шрифтов.

.wf-loading h1, .wf-loading p {
visibility: hidden;
}

.wf-active h1, .wf-active p, .wf-inactive h1, .wf-inactive p {
visibility: visible;
}

Справки по другим продуктам

Почему мои веб-шрифты используются с use.typekit.net?

Adobe

Получайте помощь быстрее и проще

Новый пользователь?