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

Настройка производительности веб-шрифтов с помощью параметра font-display

  1. Руководство пользователя Adobe Fonts
  2. Введение
    1. Требования к системе и подписке
    2. Поддержка браузеров и ОС
    3. Добавление шрифтов на компьютере
    4. Добавление шрифтов на веб-сайт
    5. Добавление шрифтов в мобильном приложении CC
  3. Лицензирование шрифтов
    1. Шрифты, добавленные из Adobe Fonts
    2. Веб-шрифты из Adobe Fonts
    3. Клиенты Creative Cloud для организаций
    4. Удаленные шрифты
    5. Почему эти шрифты не включены в мою подписку на Creative Cloud?
    6. Почему меня просят приобрести лицензию на шрифты в Adobe Fonts?
    7. Шрифты Adobe Fonts недоступны для идентификаторов Adobe ID, зарегистрированных в Китае
  4. Получение и использование шрифтов
    1. Использование шрифтов Adobe Fonts в приложениях Creative Cloud
    2. Управление шрифтами
    3. Поиск шрифтов из изображений
    4. Обработка отсутствующих шрифтов в приложениях для настольных ПК
    5. Использование шрифтов в InDesign
    6. Шрифты и оформление
    7. Использование веб-шрифтов в документах HTML5 Canvas
    8. Использование шрифтов в InCopy
    9. Использование веб-шрифтов в Muse
    10. Упаковка файлов шрифтов
    11. Руководство по устранению проблем с добавлением шрифтов
    12. Добавленные шрифты не отображаются в меню шрифтов
    13. «Не удается добавить один или несколько шрифтов» или «Уже установлен шрифт с тем же названием»
    14. Что произойдет, если разработчик обновит используемый мной шрифт?
    15. Скрытие шрифтов в программах Adobe
  5. Дизайн и веб-разработка
    1. Добавление шрифтов на веб-сайт
    2. Руководство по устранению неполадок: добавление шрифтов на веб-сайт
    3. Устранение проблем, связанных со шрифтами
    4. Использование веб-шрифтов в HTML-письмах или новостных рассылках
    5. Использование веб-шрифтов с ускоренными мобильными страницами (AMP)
    6. Селекторы CSS
    7. Настройка производительности веб-шрифтов с помощью параметра font-display
    8. Коды встраивания
    9. Динамический поднабор и предоставление веб-шрифтов
    10. События шрифтов
    11. Почему мои веб-шрифты используются с use.typekit.net?
    12. Сайт не может подключиться к use.typekit.net
    13. Использование веб-шрифтов с CodePen
    14. Поддержка браузеров и ОС
    15. Домены
    16. Использование веб-шрифтов при локальной разработке
    17. Политика безопасности контента
    18. Печать веб-шрифтов
  6. Поддержка языка и возможности OpenType
    1. Поддержка языков и поднабор
    2. Использование функций OpenType
    3. Синтаксис для функций OpenType в CSS
  7. Технологии шрифтов
    1. Цветные шрифты OpenType-SVG
    2. Ten Mincho: важные моменты при обновлении с версии 1.000

Узнайте, как управлять скоростью отображения веб-шрифтов с помощью параметра font-display.

Параметр font-display позволяет задавать режим загрузки веб-шрифтов в браузере и применение их на веб-сайте. Предусмотрено пять значений параметра font-display:

Значение параметра font-display

Функция 

Auto

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

Block

Текст на веб-сайте будет скрыт, пока не загрузится веб-шрифт. В этом режиме посетители веб-сайта могут увидеть текст Flash или невидимый текст либо FOIT.

Swap

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

Fallback

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

Optional

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

Технические подробности по параметру font-display и поддерживаемым значениям см. в разделе Спецификация CSS Fonts Module Level 4.

Примечание.

По умолчанию проекты веб-шрифтов создаются со значением auto для параметра font-display.

Чтобы настроить параметр font-display, выполните приведенные ниже действия.

  1. На странице веб-проектов нажмите Редактировать проект.

    Редактирование проекта
    Редактирование проекта

  2. Выберите любое из следующих значений параметра font-display на боковой панели. По умолчанию параметр font-display в проектах веб-шрифтов имеет значение auto.

    font display settings

  3. Нажмите Сохранить изменения, и значение параметра font-display будет применено к вашему веб-сайту в течение нескольких минут.

Новый параметр font-display будет автоматически включен на веб-сайте в составе имеющегося встраиваемого кода.

Обновление существующих веб-проектов

Поддержка параметра font-display была добавлена в загрузку веб-шрифтов Adobe в сентябре 2020 года. Веб-проекты, созданные до сентября 2020 года, были обновлены — теперь в них по умолчанию используется режим font-display: auto.

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

Adobe, Inc.

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

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