Wie füge ich Schriftarten zu Create-React-App-Projekten hinzu, ohne sie auszuwerfen?

Hinzufügen von Schriftarten zu Projekten basierend auf Create-React-App ohne Auswerfen

Die Verwendung der Build-Pipeline ist die empfohlene Methode zum Hinzufügen von Schriftarten zu Create-React-App-Projekten. Dies gewährleistet eine ordnungsgemäße Verarbeitung, Hashes für das Browser-Caching und die Erkennung von Kompilierungsfehlern.

1. Importe verwenden:

   • Eine CSS-Datei importieren aus JS, wie src/index.css von src/index.js.

   • Referenzschriftarten in der CSS-Datei mit relativen Pfaden, wie:

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

2. Verwendung des öffentlichen Ordners (nicht empfohlen):

   • Schriftarten in public/fonts/MyFont.woff platzieren.
   • Erstellen eine CSS-Datei im öffentlichen Ordner, z. B. public/index.css.

   • Fügen Sie einen Link zu dieser CSS-Datei in public/index.html hinzu:

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

   • Referenzschriftarten in der CSS-Datei mithilfe des relativen Pfads „fonts/MyFont.woff“.

Beachten Sie, dass die Verwendung der Methode „Öffentlicher Ordner“ nicht bevorzugt wird, da sie keine ordnungsgemäße Verarbeitung gewährleistet , Hashing oder Fehlererkennung. Außerdem ist es anfälliger für Caching-Probleme.

Unabhängig von der Methode müssen die Schriftarten in einem unterstützten Format vorliegen, z. B. WOFF, WOFF2 oder TTF.

Das obige ist der detaillierte Inhalt vonWie füge ich Schriftarten zu Create-React-App-Projekten hinzu, ohne sie auszuwerfen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!