Wie füge ich benutzerdefinierte Schriftarten zu einem Create-React-App-Projekt hinzu?

Hinzufügen von Schriftarten zu Create-React-App-Projekten

Durch die Verwendung von Importen

Diese empfohlene Methode integriert Schriftarten in die Build-Pipeline. Um dies zu erreichen:

• Importieren Sie eine CSS-Datei aus JS (z. B. importieren Sie „./index.css“).
• Referenzieren Sie Schriftarten in der CSS-Datei mit relativen Pfaden, die mit beginnen. / (z. B. @font-face { src: local('MyFont'), url(./fonts/MyFont.woff) }).

Durch Nutzung des öffentlichen Ordners

Alternativ können Sie Schriftarten im öffentlichen Ordner manuell verwalten:

• Schriftarten an einem Ort im öffentlichen Ordner platzieren (z. B. public/fonts/MyFont.woff).
• Hinzufügen eines auf die CSS-Datei von public/index.html (z. B. ).
• Verwenden Sie die reguläre CSS-Notation, um auf Schriftarten zu verweisen innerhalb der CSS-Datei unter Berücksichtigung relativer Pfade (z. B. @font-face { src: local('MyFont'), url(fonts/MyFont.woff) }).

Empfehlung

Entscheiden Sie sich für die Methode „Verwenden von Importen“ und profitieren Sie von den folgenden Vorteilen:

• Build-Pipeline-Integration
• Hashing für Browser-Caching
• Kompilierungsfehler für fehlende Dateien

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