gatsby omni font loader
v2.0.2
npm install gatsby-omni-font-loader react-helmet
ou
yarn add gatsby-omni-font-loader react-helmet
Ajoutez l'extrait suivant au tableau des plugins 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" ,
} ,
] ,
} ,
} | Option | Description | Défaut |
|---|---|---|
| mode | Peut être défini sur async (par défaut) ou render-blocking . En mode async , les polices sont chargées de manière optimale, mais FOT est visible. En mode render-blocking FOT se produira dans de rares cas, mais les fichiers de police deviendront bloquants de rendu. | asynchrone |
| portée | Peut être défini sur body (par défaut) ou html . Définit l'élément cible pour les noms de classe HTML à appliquer. | corps |
| pertiner | Fonctionne en mode async . Activez l'écouteur de chargement de police pour gérer le flash de texte non style. S'il est activé, les classes CSS seront appliquées à HTML une fois que chaque police aura terminé le chargement. | FAUX |
| intervalle (v1 uniquement) | Fonctionne si enableListener est true . Intervalle de l'auditeur de police (dans MS). La valeur par défaut est de 300 ms. Recommandé:> = 300 ms. | 300 |
| Timeout (v1 uniquement) | Fonctionne si enableListener est true . Valeur de délai d'expiration de l'écouteur de police (dans MS). La valeur par défaut est de 30s (30000 ms). L'auditeur ne vérifiera plus les polices chargées après le temps mort, les polices seront toujours chargées et affichées, mais sans manipuler FOT. | 30000 |
| coutume | Configuration des polices auto-hébergées. Ajoutez des fichiers de police et des fichiers CSS de police dans le dossier static . Array de {name: "Font name", file: "https://url-to-font-css.path"} objets. | [] |
| web | Config des polices Web. Le lien de fichier doit pointer vers le fichier de police CSS. Array de {name: "Font name", file: "https://url-to-font-css.path"} objets. | [] |
| préconnecter | URL utilisées pour la méta de préconnexion. URL de base où les fichiers de police sont hébergés. | [] |
| précharge | URL supplémentaires utilisées pour la méta de précharge. La précharge pour les URL fournies sous l'attribut file des custom et les polices web sont générées automatiquement. | [] |
Chargez des feuilles de styles de police et des fichiers en mode faible priorité. Si vous souhaitez ajouter des polices de manière performante, gérez vous-même FOT et assurez-vous que les temps de rendu de page sont faibles, vous devez utiliser le mode async .
Avantages: Performances, le contenu est affiché avant que les fichiers de police ne soient téléchargés et analysés
Inconvénients: Fout doit être manipulé
Chargez des feuilles de styles de police et des fichiers en mode haute priorité. Si vous souhaitez utiliser ce plugin comme un moyen simple d'ajouter des polices à votre projet comme vous le feriez dans tout autre projet, sans aucune optimisation de performances et manipulation FOT, vous devez utiliser le mode render-blocking .
Avantages: Balisage simple, FOT ne se produira pas dans la plupart des cas
Inconvénients: les feuilles de styles de police et les fichiers de police peuvent retarder le premier temps de peinture de contenu
Lors du chargement des polices de manière asynchrone, un flash de texte non style (FOUT) peut se produire car les polices se chargent quelques instants plus tard après la page s'affiche à l'utilisateur.
Pour éviter cela, nous pouvons utiliser CSS pour styliser la police de secours pour correspondre étroitement à la taille de la police, à la hauteur de la ligne et à l'espacement des lettres de la police principale qui est chargée.
Lorsque enableListener: true est défini dans la configuration du plugin dans gatsby-config.js , des classes HTML sont ajoutées à l'élément <body> car les polices sont chargées.
Le format de nom de classe HTML sera dans le format suivant wf-[font-family-name] . Lorsque toutes les polices sont chargées wf-all est appliqué.
Vous pouvez utiliser le correspondant de style de police pour ajuster la configuration parfaite de la police de secours et de la section CSS.
Voici l'exemple de la façon dont l'élément body ressemblera après que toutes les polices sont chargées (selon la configuration).
< body
class =" wf-lazy-monday wf-font-awesome-5-brands wf-font-awesome-5-free wf-staatliches wf-all "
> </ body > interval supprimé et timeoutwf-[font-family-name] plus générique pour éviter de mélanger les conventions de dénomination N'hésitez pas à signaler les problèmes que vous trouvez et n'hésitez pas à contribuer au projet en créant des demandes de traction.
Les contributions sont les bienvenues et appréciées!
Merci pour votre contribution!
Henrik • Lennart • Francis Champagne • Hugo
Merci pour votre soutien!
Studio roboto
