vite plugin webfont dl Téléchargement - vite plugin webfont dl Code source Télécharger

vite plugin webfont dl

Téléchargement de polices

v3.10.3

Télécharger

? Webfont Dowload Vite Plugin ⚡

Collecte des liens WebFont, des importations et des définitions à partir de votre projet VITE, télécharge les fichiers CSS et FONT (Privacy-First) , ajoutez les polices à votre bundle (ou sert via Dev Server) , et injecte des définitions de police à l'aide d'une méthode de blocage non rendu , ce qui les présente pour un développement hors ligne externe .

? Installer

npm i vite-plugin-webfont-dl -D

Table des matières

? Installer
Usage:
- ? Zéro config _{^{[méthode a]}}
- ? Configuration simple _{^{[méthode b]}}
C'est tout!
- ? Laravel
- ? Capture d'écran
? Fournisseurs Webfont pris en charge
Options
❓ Webfonts tiers
? Comment ça marche
- ? Fontes Google
- ? Plugin Webfont-DL VITE
Référence
Ressources
? Licence

? Utilisation: zéro config _{^{[méthode a]}}

Extraits, téléchargements et injecte des polices de l' extrait de code Google Fonts d'origine .

Sélectionnez vos familles de polices dans votre fournisseur WebFont (par exemple, les polices Google) et copiez le code dans <head> dans le bloc "Utiliser sur le Web" :

 < 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 " >

Ajoutez webfontDownload à vos plugins Vite sans aucune configuration et le plugin s'occupe automatiquement de tout:

 // vite.config.js

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

export default {
  plugins : [
    webfontDownload ( ) ,
  ] ,
} ;

Les balises WebFont originales seront remplacées dans dist/index.html :

 < style > @font-face{font-family:...;src:url(/assets/foo-xxxxxxxx.woff2) format('woff2'),url(/assets/bar-yyyyyyyy.woff) format('woff')}... </ style >

? Utilisation: configuration simple _{^{[méthode b]}}

Extraits, téléchargements et injecte des polices de l' URL CSS WebFont configurée .

Sélectionnez vos familles de polices dans votre fournisseur WebFont (par exemple, les polices Google) et copiez les URL CSS dans le bloc de code "Utiliser sur le Web" :
```
 < link href =" [CSS URL] " rel =" stylesheet " >
```

Ajoutez webfontDownload à vos plugins Vite avec l' URL Sélectionnée 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'
    ] ) ,
  ] ,
} ;

C'est tout!

Les webfonts sont injectés et prêts à l'emploi .
Le plugin fait son travail de manière transparente, que vous travailliez sur un serveur de développement local ou que vous construisez en production.

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

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

? Laravel

Pour le faire fonctionner avec le plugin Laravel Vite, ajoutez cette ligne à votre fichier de lame:

 @vite ( ' webfonts.css ' )

? Capture d'écran

? Fournisseurs Webfont pris en charge

Google Fonts : fonctionne avec une configuration zéro ou une configuration simple
Bunny Fonts : fonctionne avec une configuration zéro ou une configuration simple
Fonshare : fonctionne avec une configuration zéro ou une configuration simple
Code Fira , Font Hack ( cdn.jsdelivr.net ): fonctionne avec une configuration zéro ou une configuration simple
Inter Font ( rsms.me ): fonctionne avec une configuration nulle ou une configuration simple
Tout fournisseur avec CSS (contenant des définitions @font-face ) fonctionne avec une configuration simple

Options

injectAsStyleTag ( boolean , par défaut: true ):
Injecter des webfonts en tant que balise <style> (CSS embarqué) ou comme un fichier .css externe
minifyCss ( boolean , par défaut: valeur de build.minify ):
Minify CDS CSS pendant la construction.
embedFonts ( boolean , par défaut: false ):
Intégrer les polices codées en base de base64 en CSS.
Dans certains cas, peut entraîner l'augmentation de la taille des fichiers si CSS entre plusieurs références au même fichier de police. Exemple
async ( boolean , par défaut: true ):
Empêchez l'utilisation de gestionnaires d'événements en ligne ( webfonts.css ) qui peuvent entraîner des problèmes de politique de sécurité du contenu.
Fonctionne uniquement avec injectAsStyleTag:false .
cache ( boolean , par défaut: true ):
Stockez constamment les fichiers CSS et FONT téléchargés dans le cache de fichiers locaux.
S'il est défini sur false le cache existant sera supprimé.
proxy ( false|AxiosProxyConfig , par défaut: false ):
Configuration proxy pour les demandes réseau.
assetsSubfolder ( string , par défaut: '' ):
Déplace les fichiers de police téléchargés pour séparer le sous-dossier dans le répertoire des actifs.

usage:

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

ou:

 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 : '' ,
  }
)

❓ Webfonts tiers

️ L'utilisation de la méthode standard pour ajouter des webfonts tiers (polices Google, polices de lapin ou fondshare) à une page Web peut ralentir considérablement la charge de page. Lighthouse et Pagespeed Insights les appellent "Render Blocking Resource" , ce qui signifie que la page ne peut pas rendre complètement entièrement jusqu'à ce que le WEBFONTS CSS n'ait pas été récupéré à partir du serveur distant.

? En évitant les ressources de blocage de rendu causées par des Webfonts tiers, vous pouvez augmenter les performances de la page qui conduit à une meilleure expérience de l'utilisateur et améliore les résultats du référencement .

Le plugin télécharge les polices données à partir du service WebFont tiers (comme Google Fonts) et les injecte dynamiquement (en tant que feuille de style interne ou externe) dans votre projet Vite, transformant les webfont tiers en tiers en auto-hébergées . ?

? En plus de l' augmentation significative des performances , vos visiteurs bénéficieront également de la protection de la vie privée , car aucun serveur tiers n'est impliqué.

? Comment ça marche

? Fontes Google

Google Fontts génère le code suivant que vous devez injecter dans <head> de votre site Web, exemple :

 < 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 " >

Que se passe-t-il sur le côté client avec des polices Google :

La première ligne donne un indice au navigateur pour commencer la poignée de main de connexion (DNS, TCP, TLS) avec fonts.googleapis.com . Cela se produit en arrière-plan pour améliorer les performances. [ preconnect ]
La deuxième ligne est un autre indice de préconnexion à fonts.gstatic.com . [ preconnect ]
La troisième ligne demande au navigateur de charger et d'utiliser un fichier de feuille de style CSS à partir de fonts.googleapis.com (avec font-display:swap ) . [ stylesheet ]
Le navigateur télécharge le fichier CSS et commence à l'analyser. Le CSS analysé est un ensemble de définitions @font-face contenant des URL de police à partir du serveur fonts.gstatic.com .
Le navigateur commence à télécharger toutes les polices pertinentes à partir de fonts.gstatic.com .
Après les polices réussies, téléchargez le navigateur échange les polices de secours aux personnes téléchargées.

?

? Plugin Webfont-DL VITE

Au contraire, le plugin WebFont-DL fait la majeure partie du travail au moment de la construction, laisse le minimum au navigateur.

Plugin WebFont-DL

Collecte les URL CSS WebFont (à partir du plugin config, index.html et le CSS généré)
Télécharge le (S) Webfont CSS (s)
extrait les URL de police
télécharge les polices
ajoute les polices au bundle
Génère un CSS ( <style> TAG) intégré ou un fichier CSS WebFont / externe
Ajoutez-les au bundle et injecte le code suivant dans <head> de votre site Web à l'aide d'une méthode de blocage non-rend, exemple :

 < 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 >

ou (en utilisant du serveur de développement ou 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 " >

Que se passe-t-il sur le côté client avec le plugin WebFont-DL :

Chargez les polices à partir du CSS intégré ( <style> TAG).

ou

First Line demande au navigateur de préfecter un fichier CSS pour une utilisation ultérieure comme feuille de style. [ preload ]
La deuxième ligne ordonne au navigateur de charger et d'utiliser ce fichier CSS comme une feuille de style " print " (blocage non de rendu) . Après le chargement, la promotion de la feuille de styles de type « all » (en supprimant l'attribut " media "). [ stylesheet ]