Comment gérer efficacement les polices dans create-react-app sans les éjecter ?

Gestion des polices dans create-react-app

Lors de l'utilisation de create-react-app sans éjection, le placement des polices importées via @font -face peut prêter à confusion. Voici deux options à considérer :

Utilisation des importations

Il s'agit de l'approche recommandée car elle intègre les polices dans le pipeline de construction, garantissant une mise en cache correcte du navigateur et des erreurs de compilation si il manque des fichiers. Importez un fichier CSS à partir de votre fichier JavaScript, tel que src/index.js en important src/index.css. Dans le fichier CSS, définissez la règle @font-face avec un chemin relatif vers le fichier de police dans le répertoire src/fonts, par exemple :

<code class="css">@font-face {
  font-family: 'Myriad Pro Regular';
  src: local('Myriad Pro Regular'), url(./fonts/Myriad Pro Regular.woff') format('woff');
}</code>

Utilisation du dossier public

Bien que cette méthode ne soit pas recommandée, elle implique de placer les polices dans le dossier public, par exemple public/fonts/MyFont.woff. Dans ce cas, créez un fichier CSS dans le dossier public, tel que public/index.css, et ajoutez-y manuellement un lien dans public/index.html. Dans le fichier CSS, utilisez la notation CSS standard avec un chemin relatif vers le fichier de police dans le répertoire public/fonts, par exemple :

<code class="css">@font-face {
  font-family: 'Myriad Pro Regular';
  src: local('Myriad Pro Regular'), url(fonts/Myriad Pro Regular.woff') format('woff');
}</code>

Cependant, cette méthode présente des inconvénients tels que des hachages et une minification manquants, ce qui conduit à un chargement plus lent et à des problèmes de mise en cache potentiels.

Recommandation

La première méthode, « Utilisation des importations », est préférée car elle garantit une gestion appropriée des polices dans le pipeline de construction et évite les problèmes potentiels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!