- Руководство пользователя Adobe Fonts
- Введение
- Лицензирование шрифтов
- Лицензирование шрифтов
- Управление учетной записью
- Лицензирование для пользователей Creative Cloud для организаций
- Добавление лицензий на шрифты в учетную запись
- Удаление шрифтов из библиотеки подписки
- Шрифты Adobe Fonts недоступны для идентификаторов Adobe ID, зарегистрированных в Китае
- Почему эти шрифты не включены в мою подписку на Creative Cloud?
- Удаление шрифта Morisawa в сентябре 2021 г.
- Получение и использование шрифтов
- Использование шрифтов Adobe Fonts в приложениях Creative Cloud
- Управление шрифтами
- Обработка отсутствующих шрифтов в приложениях для настольных ПК
- Использование шрифтов в InDesign
- Шрифты и оформление
- Использование веб-шрифтов в документах HTML5 Canvas
- Использование шрифтов в InCopy
- Как использовать шрифты в Adobe Muse
- Использование веб-шрифтов в Muse
- Упаковка файлов шрифтов
- Руководство по устранению проблем с добавлением шрифтов
- Добавленные шрифты не отображаются в меню шрифтов
- «Не удается добавить один или несколько шрифтов» или «Уже установлен шрифт с тем же названием»
- Что произойдет, если разработчик обновит используемый мной шрифт?
- Дизайн и веб-разработка
- Добавление шрифтов на веб-сайт
- Руководство по устранению неполадок: добавление шрифтов на веб-сайт
- Использование веб-шрифтов в HTML-письмах или новостных рассылках
- Использование веб-шрифтов с ускоренными мобильными страницами (AMP)
- Селекторы CSS
- Настройка производительности веб-шрифтов с помощью параметра font-display
- Коды встраивания
- Динамический поднабор и предоставление веб-шрифтов
- События шрифтов
- Почему мои веб-шрифты используются с use.typekit.net?
- Сайт не может подключиться к use.typekit.net
- Использование веб-шрифтов с CodePen
- Поддержка браузеров и ОС
- Домены
- Использование веб-шрифтов при локальной разработке
- Политика безопасности контента
- Печать веб-шрифтов
- Поддержка языка и возможности OpenType
- Технологии шрифтов
События шрифтов включены взагрузку шрифтов 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;
}
Справки по другим продуктам
Adobe MAX
— творческая конференция
С 14 по 16 октября очно в Майами-Бич и онлайн
Adobe MAX
Творческая конференция
С 14 по 16 октября очно в Майами-Бич и онлайн