Maison  >  Article  >  interface Web  >  Comment ajouter des polices personnalisées à un projet Create-React-App ?

Comment ajouter des polices personnalisées à un projet Create-React-App ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-11-06 02:50:02863parcourir

How do I add custom fonts to a Create-React-App project?

Ajout de polices aux projets Create-React-App

À l'aide d'importations

Cette méthode recommandée intègre des polices dans le pipeline de construction. Pour y parvenir :

  • Importez un fichier CSS depuis JS (par exemple, importez './index.css').
  • Polices de référence dans le fichier CSS en utilisant des chemins relatifs commençant par . / (par exemple, @font-face { src: local('MyFont'), url(./fonts/MyFont.woff) }).

En utilisant le dossier public

Vous pouvez également gérer manuellement les polices dans le dossier public :

  • Placez les polices dans un emplacement du dossier public (par exemple, public/fonts/MyFont.woff).
  • Ajouter un au fichier CSS à partir de public/index.html (par exemple, ).
  • Utilisez la notation CSS standard pour référencer les polices dans le fichier CSS, en tenant compte des chemins relatifs (par exemple, @font-face { src: local('MyFont'), url(fonts/MyFont.woff) }).

Recommandation

Optez pour la méthode "Utilisation des importations" pour les avantages suivants :

  • Construire l'intégration du pipeline
  • Hachage pour la mise en cache du navigateur
  • Erreurs de compilation pour les fichiers manquants

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn