Главная страница>Ресурсы для создания веб-сайтов>Загрузка шрифта
Скачать

? WebFont Dowload VITE плагин ⚡

Собирает ссылки WebFont, импорт и определения из вашего проекта Vite, загрузки CSS и файлы шрифтов (Privacy-First) , добавляют шрифты в свой комплект (или обслуживает сервер Dev) и вводит определения шрифтов, используя метод неревсированного блокировки , что хранит внешние CSS и файлы шрифтов в постоянном файловом кэше , что делает их доступными для выключения в автономном режиме .


? Установить 

npm i vite-plugin-webfont-dl -D

Оглавление

  1. ? Установить
  2. Использование:
    • ? Zero Config [Метод A]
    • ? Простая конфигурация [Метод B]
  3. Вот и все!
    • ? Ларавел
    • ? Скриншот
  4. ? Поддерживаемые поставщики WebFont
  5. Параметры
  6. ❓ Сторонние веб-официальные работы
  7. ? Как это работает
    • ? Google шрифты
    • ? WebFont-DL VITE плагин
  8. Эталон
  9. Ресурсы
  10. ? Лицензия

? Использование: Zero Config [Метод A]

Извлекает, загружает и вводит шрифты из исходного фрагмента кода Google Fonts .

  1. Выберите семейства шрифтов в своем поставщике WebFont (например, Google Fonts) и скопируйте код в <head> из блока «Использовать в Интернете» : 
     < link rel =" preconnect " href =" https://fonts.googleapis.com " >
< link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin >
< link href =" https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400&family=Roboto:wght@100&display=swap " rel =" stylesheet " >
  2. Добавьте webfontDownload в свои плагины Vite без какой -либо конфигурации, и плагин автоматически позаботится обо всем: 
     // vite.config.js

import webfontDownload from 'vite-plugin-webfont-dl' ;

export default {
  plugins : [
    webfontDownload ( ) ,
  ] ,
} ;
  3. Исходные теги WebFont будут заменены в dist/index.html : 
     < style > @font-face{font-family:...;src:url(/assets/foo-xxxxxxxx.woff2) format('woff2'),url(/assets/bar-yyyyyyyy.woff) format('woff')}... </ style >

? Использование: простая конфигурация [Метод B]

Извлекает, загружает и вводит шрифты из настроенного URL (ы) WebFont CSS .

  1. Выберите семейства шрифтов в своем поставщике WebFont (например, шрифт Google) и скопируйте URL (ы) CSS из кода «Использовать в веб -блоке: 
     < link href =" [CSS URL] " rel =" stylesheet " >
  2. Добавьте webfontDownload в ваши плагины Vite с выбранным URL (ы) Google Fonts CSS : 
     // vite.config.js

import webfontDownload from 'vite-plugin-webfont-dl' ;

export default {
  plugins : [
    webfontDownload ( [
      'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap' ,
      'https://fonts.googleapis.com/css2?family=Fira+Code&display=swap'
    ] ) ,
  ] ,
} ;

Вот и все!

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

 h1 {
  font-family : 'Press Start 2P' , cursive;
}

h2 {
  font-family : 'Fira Code' , monospace;
}

? Ларавел

Чтобы он работал с плагином Laravel Vite, добавьте эту строку в свой файл лезвия: 

 @vite ( ' webfonts.css ' )

? Скриншот


? Поддерживаемые поставщики WebFont

  • Google шрифты : работает с нулевой конфигурацией или простой конфигурацией
  • Шрифты кролика : работает с нулевой конфигурацией или простой конфигурацией
  • Fontshare : работает с нулевой конфигурацией или простой конфигурацией
  • Код FIRA , Hack Fonts ( cdn.jsdelivr.net ): работает с нулевой конфигурацией или простой конфигурацией
  • Inter Font ( rsms.me ): работает с нулевой конфигурацией или простой конфигурацией
  • Любой поставщик с CSS (содержащий определения @font-face ) работает с простой конфигурацией

Параметры

  • injectAsStyleTag ( boolean , по умолчанию: true ):
    Внедрять веб -салоны как тег <style> (встроенный CSS) или как внешний файл .css

  • minifyCss ( boolean , дефолт: значение build.minify ):
    Минифицируйте код CSS во время сборки.

  • embedFonts ( boolean , по умолчанию: false ):
    Встроенный базовый 64-кодированный шрифт в CSS.
    В некоторых случаях может привести к увеличению размера файлов, если CSS содержит несколько ссылок на один и тот же файл шрифта. Пример

  • async ( boolean , по умолчанию: true ):
    Предотвратить использование встроенных обработчиков событий ( webfonts.css ), которые могут вызвать проблемы политики безопасности контента.
    Работает только с injectAsStyleTag:false .

  • cache ( boolean , по умолчанию: true ):
    Постоянно храните загруженные файлы CSS и шрифт в локальном кэше файлов.
    Если установлено на false существующий кэш будет удален.

  • proxy ( false|AxiosProxyConfig , по умолчанию: false ):
    Конфигурация прокси для сетевых запросов.

  • assetsSubfolder ( string , default: '' ):
    Перемещает загруженные файлы шрифтов в отдельную подпалку в каталоге активов.

Использование: 

 ViteWebfontDownload (
  [ ] ,
  {
    injectAsStyleTag : true ,
    minifyCss : true ,
    embedFonts : false ,
    async : true ,
    cache : true ,
    proxy : false ,
    assetsSubfolder : '' ,
  }
)

или: 

 ViteWebfontDownload (
  [
    'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap' ,
  ] ,
  {
    injectAsStyleTag : true ,
    minifyCss : true ,
    embedFonts : false ,
    async : true ,
    cache : true ,
    proxy : false ,
    assetsSubfolder : '' ,
  }
)

❓ Сторонние веб-официальные работы

️ Использование стандартного метода для добавления сторонних веб-регистраций (шрифты Google, шрифты кролика или fontshare) на веб-страницу может значительно замедлить загрузку страницы. Маяк и PageSpeed Insights называет их «ресурсом блокировки рендеринга» , что означает, что страница не может полностью рендерина, пока WebFonts CSS не будет извлечена с удаленного сервера.

? Избегая ресурсов блокировки рендеринга, вызванных сторонними веб-регистратами, вы можете повысить производительность страницы , что приводит к лучшему пользовательскому опыту , и это улучшает результаты SEO .

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

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


? Как это работает

? Google шрифты

Google Fonts генерирует следующий код, который вы должны внедрить в свой веб -сайт <head> , пример : 

 < link rel =" preconnect " href =" https://fonts.googleapis.com " >
< link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin >
< link href =" https://fonts.googleapis.com/css2?family=Fira+Code&display=swap " rel =" stylesheet " >

Что происходит на стороне клиента с шрифтами Google :

  1. Первая линия дает подсказку для браузера, чтобы начать рукопожатие соединения (DNS, TCP, TLS) с fonts.googleapis.com . Это происходит на заднем плане, чтобы улучшить производительность. [ preconnect ]
  2. Вторая строка - еще один намек на предварительную связь для fonts.gstatic.com . [ preconnect ]
  3. Третья строка инструктирует браузер загружать и использовать файл CSS StyleSheep от fonts.googleapis.com (с font-display:swap ) . [ stylesheet ]
  4. Браузер загружает файл CSS и начинает анализировать его. Проанализированный CSS представляет собой набор определений @font-face содержащих URL-адреса шрифтов с сервера fonts.gstatic.com .
  5. Браузер начинает загружать все соответствующие шрифты с fonts.gstatic.com .
  6. После успешных шрифтов загружают браузер поменяются шрифтами запасных на загруженные.

?

? WebFont-DL VITE плагин

Напротив, плагин WebFont-DL выполняет большую часть работы во время сборки, оставляет минимум в браузер.

Плагин WebFont-DL

  • Собирает URL -адреса WebFont CSS (из конфигурации плагина, index.html и сгенерированного CSS)
  • Загрузите файлы (ы) Webfont CSS
  • Извлекат URL -адреса шрифта
  • Загружает шрифты
  • добавляет шрифты в пакет
  • генерирует встроенный CSS ( <style> тег) или файл WebFont / Extra CSS
  • Добавьте их в пакет и внедряет следующий код в свой сайт <head> Используя метод блокировки без рендеринга, пример : 
 < style >
  @font-face {
    font-family: 'Fira Code';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(/assets/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_GNsJV37Nv7g.9c348768.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  ...
</ style >

или (с помощью Dev Server или injectAsStyleTag: false Option) 

 < link rel =" preload " as =" style " href =" /assets/webfonts.b904bd45.css " >
< link rel =" stylesheet " media =" print " onload =" this.onload=null;this.removeAttribute('media'); " href =" /assets/webfonts.b904bd45.css " >

Что происходит на стороне клиента с плагином WebFont-DL :

  1. Загрузите шрифты со встроенного CSS ( <style> тега).

или

  1. Первая строка инструктирует браузер предварительно переопределять файл CSS для последующего использования в качестве таблицы стиля. [ preload ]
  2. Вторая строка инструктирует браузер загружать и использовать этот файл CSS в качестве таблицы стилей « print » (блокировка без рендеринга) . После загрузки его продвижения на таблицу стилей типа « all » (удалив атрибут « media »). [ stylesheet ]

Эталон

Starter Vite Project с

▶ ️ Стандартные шрифты Google ? ▶ ️ Плагин WebFont DL VITE
? webfont.feat.agency ? webfont-dl.feat.agency

Сравнивать


Ресурсы

  • Контрольный список скорости страницы / исправление и устранение ресурсов блокировки рендеринга

? Лицензия

MIT Лицензия © 2022 Feat.

Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все