Comment utiliser les polices dans Create-React-App sans les éjecter ?

Comment incorporer des polices dans des projets Create-React-App sans éjection

Afin d'utiliser des polices dans des projets create-react-app sans la nécessité d'une éjection, deux options principales sont disponibles :

Méthode 1 : Utilisation des importations

Cette approche consiste à importer des fichiers CSS dans votre code JavaScript. Par défaut, src/index.js fait référence à src/index.css. Incorporez vos polices dans ce fichier CSS en utilisant des chemins relatifs commençant par ./:

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

Méthode 2 : Utiliser le dossier public

Si vous préférez ne pas utiliser le construire un pipeline, vous pouvez opter pour l'approche des dossiers publics. Placez vos polices dans le répertoire public/fonts :

public/fonts/MyFont.woff

Créez un fichier CSS dans le dossier public, tel que public/index.css, et liez-le manuellement dans public/index.html :

<code class="html">&lt;link rel=&quot;stylesheet&quot; href=&quot;%PUBLIC_URL%/index.css&quot;&gt;</code>

Inside public/index.css :

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

Recommandation

La méthode initiale, tirant parti des importations, est fortement recommandée car elle donne accès à des fonctionnalités telles que garantir que les polices passent par le pipeline de construction, acquérir des hachages lors de la compilation pour une mise en cache efficace du navigateur et recevoir des alertes de compilation si des fichiers sont absents.

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!