Wie füge ich Schriften zu Projekten hinzu, die auf Reaktivitätsanwendungen basieren?

Es gibt zwei Möglichkeiten:

Importe verwenden

Dies ist die vorgeschlagene Option. Es stellt sicher, dass Ihre Zeichensätze die Build-Pipeline durchlaufen, während der Kompilierung Hashes abrufen, sodass das Browser-Caching ordnungsgemäß funktioniert und dass Kompilierungsfehler auftreten, wenn die Dateien fehlen.

Als beschrieben in „Hinzufügen von Bildern, Schriftarten und Dateien“ müssen Sie eine CSS-Datei aus JS importieren lassen. Beispielsweise importiert src/index.jssrc/index.css standardmäßig:

import './index.css';

Eine solche CSS-Datei durchläuft die Build-Pipeline und kann auf Zeichensätze und Bilder verweisen. Wenn Sie beispielsweise eine Schrift in src/fonts/MyFont.woff einfügen, könnte Ihr index.css Folgendes enthalten:

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
}

Beachten Sie, wie wir einen relativen Pfad verwenden, der mit ./ beginnt. Dies ist eine spezielle Notation, die der Build-Pipeline (unterstützt von Webpack) dabei hilft, diese Datei zu ermitteln.

Normalerweise sollte das reichen.

public Ordner verwenden

Wenn Sie not aus irgendeinem Grund vorziehen, die Build-Pipeline zu verwenden, und stattdessen "klassisch" vorgehen, können Sie verwenden Sie den Ordner public und Ihre Zeichensätze dort ablegen.

Der Nachteil dieses Ansatzes besteht darin, dass die Dateien beim Kompilieren für die Produktion keine Hashes erhalten. Sie müssen also bei jeder Änderung ihre Namen aktualisieren, oder die alten Versionen werden von Browsern zwischengespeichert.

Wenn Sie dies auf diese Weise tun möchten, legen Sie die Zeichensätze irgendwo im Ordner public ab, beispielsweise in public/fonts/MyFont.woff. Wenn Sie diesem Ansatz folgen, sollten Sie auch CSS-Dateien im public-Ordner ablegen und not aus JS importieren, da das Mischen dieser Ansätze sehr verwirrend sein kann. Wenn Sie es dennoch tun möchten, haben Sie eine Datei wie public/index.css. Sie müssen <link> manuell von public/index.html zu diesem Stylesheet hinzufügen:

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

Und darin würden Sie die normale CSS-Notation verwenden:

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(fonts/MyFont.woff) format('woff');
}

Beachten Sie, wie ich fonts/MyFont.woff als Pfad verwende. Dies liegt daran, dass sich index.css im Ordner public befindet, sodass er über den öffentlichen Pfad bereitgestellt wird (normalerweise ist dies das Server-Root-Verzeichnis. Wenn Sie sich jedoch auf GitHub Pages implementieren und Ihr homepage-Feld auf http://myuser.github.io/myproject setzen, wird es von /myproject bereitgestellt). fonts befindet sich jedoch ebenfalls im Ordner public, sodass sie relativ von fonts (entweder http://mywebsite.com/fonts oder http://myuser.github.io/myproject/fonts) aus bedient werden. Deshalb verwenden wir den relativen Pfad.

Beachten Sie, dass die Build-Pipeline in diesem Beispiel vermieden wird. Sie überprüft jedoch nicht, ob die Datei tatsächlich vorhanden ist. Deshalb empfehle ich diesen Ansatz nicht. Ein weiteres Problem ist, dass unsere index.css-Datei nicht minimiert und kein Hash erhalten wird. Es wird also für die Endbenutzer langsamer und Sie riskieren, dass die Browser alte Versionen der Datei zwischenspeichern.

 Welchen Weg zu benutzen?

Gehen Sie zur ersten Methode ("Importe verwenden"). Ich habe nur das zweite beschrieben, da Sie dies versucht haben (nach Ihrem Kommentar), aber es hat viele Probleme und sollte nur der letzte Ausweg sein, wenn Sie mit einem Problem umgehen.