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

So integrieren Sie Schriftarten in Create-React-App-Projekte ohne Auswurf

Um Schriftarten in Create-React-App-Projekten ohne zu verwenden Wenn kein Auswurf erforderlich ist, stehen zwei Hauptoptionen zur Verfügung:

Methode 1: Verwendung von Importen

Dieser Ansatz beinhaltet das Importieren von CSS-Dateien in Ihren JavaScript-Code. Standardmäßig bezieht sich src/index.js auf src/index.css. Integrieren Sie Ihre Schriftarten in diese CSS-Datei unter Verwendung relativer Pfade, beginnend mit ./:

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

Methode 2: Verwendung des öffentlichen Ordners

Wenn Sie den nicht verwenden möchten Build-Pipeline können Sie sich für den Ansatz mit öffentlichen Ordnern entscheiden. Platzieren Sie Ihre Schriftarten im Verzeichnis public/fonts:

public/fonts/MyFont.woff

Erstellen Sie eine CSS-Datei im öffentlichen Ordner, z. B. public/index.css, und verknüpfen Sie sie manuell in public/index.html:

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

Inside public/index.css:

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

Empfehlung

Die ursprüngliche Methode, die Nutzung von Importen, wird dringend empfohlen, da sie Zugriff auf gewährt Funktionen wie das Sicherstellen, dass Schriftarten die Build-Pipeline durchlaufen, das Erfassen von Hashes während der Kompilierung für ein effizientes Browser-Caching und das Empfangen von Kompilierungswarnungen, wenn Dateien fehlen.

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