Heim >Web-Frontend >CSS-Tutorial >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!