Comment ajouter des polices aux projets Create-React-App sans les éjecter ?

Ajout de polices aux projets basés sur create-react-app sans éjection

L'utilisation du pipeline de construction est la méthode recommandée pour ajouter des polices aux projets create-react-app. Cela garantit un traitement correct, des hachages pour la mise en cache du navigateur et la détection des erreurs de compilation.

1. Utilisation des importations :

   • Importez un fichier CSS depuis JS, tel que src/index.css de src/index.js.

   • Polices de référence dans le fichier CSS à l'aide de chemins relatifs, comme :

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

2. Utilisation du dossier public (non recommandé) :

   • Placez les polices dans public/fonts/MyFont.woff.
   • Créez un fichier CSS dans le dossier public, tel que public/index.css.

   • Ajoutez un lien vers ce fichier CSS dans public/ index.html :

     <code class="html"><link rel="stylesheet" href="%PUBLIC_URL%/index.css"></code>

   • Polices de référence dans le fichier CSS en utilisant le chemin relatif fonts/MyFont.woff.

Notez que l'utilisation de la méthode des dossiers publics n'est pas préférable car elle ne garantit pas un traitement, un hachage ou une détection d'erreurs appropriés. Il est également plus sujet aux problèmes de mise en cache.

Quelle que soit la méthode, vous devrez disposer des polices dans un format pris en charge, tel que WOFF, WOFF2 ou TTF.

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!