Wie verwalte ich Schriftarten effektiv in der Create-React-App, ohne sie auszuwerfen?

Verwalten von Schriftarten in der Create-React-App

Bei Verwendung der Create-React-App ohne Auswerfen wird die Platzierung von über @font importierten Schriftarten geändert -Gesicht kann verwirrend sein. Hier sind zwei Optionen zu berücksichtigen:

Verwenden von Importen

Dies ist der empfohlene Ansatz, da er die Schriftarten in die Build-Pipeline integriert und so ein korrektes Browser-Caching und Kompilierungsfehler gewährleistet, wenn Dateien fehlen. Importieren Sie eine CSS-Datei aus Ihrer JavaScript-Datei, z. B. src/index.js, indem Sie src/index.css importieren. Definieren Sie in der CSS-Datei die @font-face-Regel mit einem relativen Pfad zur Schriftartdatei im Verzeichnis src/fonts, z. B.:

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

Using Public Folder

Obwohl diese Methode nicht empfohlen wird, beinhaltet sie das Platzieren von Schriftarten im öffentlichen Ordner, z. B. public/fonts/MyFont.woff. Erstellen Sie in diesem Fall eine CSS-Datei im öffentlichen Ordner, z. B. public/index.css, und fügen Sie manuell einen Link dazu in public/index.html hinzu. Verwenden Sie innerhalb der CSS-Datei die reguläre CSS-Notation mit einem relativen Pfad zur Schriftartendatei im Verzeichnis public/fonts, z. B.:

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

Diese Methode hat jedoch Nachteile wie fehlende Hashes und Minimierung, Leading zu langsamerem Laden und möglichen Caching-Problemen.

Empfehlung

Die Die erste Methode, „Verwenden von Importen“, wird bevorzugt, da sie die ordnungsgemäße Handhabung von Schriftarten innerhalb der Build-Pipeline gewährleistet und potenzielle Probleme vermeidet.

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