gatsby omni font loader gatsby omni font loader

gatsby omni font loader

Загрузка шрифта

v2.0.2

Скачать

Gatsby Omni Font Loader v2

Простой способ добавить веб -салоны или пользовательские шрифты в проект Gatsby
Выполнительная асинхронная загрузка шрифта может быть включена
Слушатель загрузки шрифта может быть включен
Флэш неоклятированного текста (Fout) поддержка обработки

Функции

Поддерживает веб-шрифты и самостоятельные шрифты
Предварительно загружает файлы и предварительные подключения к URL -адресу
Загружают шрифты асинхронно, чтобы избежать блокировки рендеринга
Реализовано при быстрой загрузке фрагментов
Загрузка статуса слушателя для избегания Fout
Небольшой размер и минимальный след

Установить

npm install gatsby-omni-font-loader react-helmet

или

yarn add gatsby-omni-font-loader react-helmet

Конфигурация

Добавьте следующий фрагмент в массив плагинов gatsby-config.js .

 {
  /* Include plugin */
  resolve : "gatsby-omni-font-loader" ,

  /* Plugin options */
  options : {

    /* Font loading mode */
    mode : "async" ,

    /* Enable font loading listener to handle FOUT */
    enableListener : true ,

    /* Preconnect URL-s. This example is for Google Fonts */
    preconnect : [ "https://fonts.gstatic.com" ] ,

    /* Self-hosted fonts config. Add font files and font CSS files to "static" folder */
    custom : [
      {
        /* Exact name of the font as defied in @font-face CSS rule */
        name : [ "Font Awesome 5 Brands" , "Font Awesome 5 Free" ] ,
        /* Path to the font CSS file inside the "static" folder with @font-face definition */
        file : "/fonts/fontAwesome/css/all.min.css" ,
      } ,
    ] ,

    /* Web fonts. File link should point to font CSS file. */
    web : [ {
        /* Exact name of the font as defied in @font-face CSS rule */
        name : "Staatliches" ,
        /* URL to the font CSS file with @font-face definition */
        file : "https://fonts.googleapis.com/css2?family=Staatliches" ,
      } ,
    ] ,
  } ,
}

Параметры

Вариант	Описание	По умолчанию
режим	Может быть установлен на `async` (по умолчанию) или `render-blocking` . В `async` режиме шрифты загружаются оптимально, но виден Fout. В режиме `render-blocking` Fout произойдет в редких случаях, но файлы шрифтов станут блокировкой рендеринга.	асинхро
объем	Может быть установлен на `body` (по умолчанию) или `html` . Устанавливает целевой элемент для HTML ClassNames для применения.	тело
EnableListener	Работает в `async` режиме. Включите слушатель загрузки шрифта обрабатывать вспышку неожиданного текста. В случае включения классы CSS будут применены к HTML после того, как каждый шрифт завершит загрузку.	ЛОЖЬ
интервал (только v1)	Работает, если `enableListener` `true` . Интервал слушателя шрифта (в MS). По умолчанию 300 мс. Рекомендуется:> = 300 мс.	300
Тайм -аут (только v1)	Работает, если `enableListener` `true` . Значение тайм -аута слушателя шрифта (в MS). По умолчанию 30 с (30000 мс). Слушатель больше не будет проверять загруженные шрифты после тайм -аута, шрифты все еще будут загружены и отображаются, но без обработки Fout.	30000
обычай	Самоупонентные шрифты конфигурация. Добавьте файлы шрифтов и файлы Font CSS в `static` папку. Массив `{name: "Font name", file: "https://url-to-font-css.path"}` объекты.	`[]`
веб -	Веб -шрифты конфигурация. Ссылка на файл должна указывать на файл Font CSS. Массив `{name: "Font name", file: "https://url-to-font-css.path"}` объекты.	`[]`
предварительный	URL -адреса, используемые для Meta Preconnect. Базовый URL, где размещаются файлы шрифтов .	`[]`
предварительная нагрузка	Дополнительные URL -адреса, используемые для предварительной нагрузки. Предварительная нагрузка для URL -адресов, предоставленных в соответствии с атрибутом `file` `custom` и `web` -шрифтов, создается автоматически.	`[]`

Асинхенный режим против блокировки рендеринга

Асинхронный режим

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

Плюсы: производительность, контент отображается до загрузки и разрабатываемых файлов шрифтов
Минусы: Фут должен быть обработан

Режим блокировки рендеринга

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

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

Обработка Fout со слушателем загрузки шрифтов

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

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

Когда enableListener: true установлен в конфигурации плагинов в gatsby-config.js , классы HTML добавляются в элемент <body> при загрузке шрифтов.

Формат имени класса HTML будет в следующем формате wf-[font-family-name] . Когда все шрифты загружаются, применяется wf-all .

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

Вот пример того, как будет выглядеть элемент body после загрузки всех шрифтов (в зависимости от конфигурации).

 < body
  class =" wf-lazy-monday wf-font-awesome-5-brands wf-font-awesome-5-free wf-staatliches wf-all "
> </ body >

V2 нарушающиеся изменения

Удаленный interval и варианты timeout
Измененный формат имени класса на более общий wf-[font-family-name] чтобы избежать смешивания соглашений об именах