Ich benutze die Create-React-App und ziehe es vor, dies nicht zu tun eject
.
Es ist nicht klar, wohin über @ font-face importierte und lokal geladene Schriftarten gehen sollen.
Ich lade nämlich
@font-face {
font-family: 'Myriad Pro Regular';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff');
}
Irgendwelche Vorschläge?
- BEARBEITEN
Einschließlich des Kerns, auf den sich Dan in seiner Antwort bezieht
➜ Client git:(feature/trivia-game-ui-2) ✗ ls -l public/static/fonts
total 1168
-rwxr-xr-x@ 1 maximveksler staff 62676 Mar 17 2014 MYRIADPRO-BOLD.woff
-rwxr-xr-x@ 1 maximveksler staff 61500 Mar 17 2014 MYRIADPRO-BOLDCOND.woff
-rwxr-xr-x@ 1 maximveksler staff 66024 Mar 17 2014 MYRIADPRO-BOLDCONDIT.woff
-rwxr-xr-x@ 1 maximveksler staff 66108 Mar 17 2014 MYRIADPRO-BOLDIT.woff
-rwxr-xr-x@ 1 maximveksler staff 60044 Mar 17 2014 MYRIADPRO-COND.woff
-rwxr-xr-x@ 1 maximveksler staff 64656 Mar 17 2014 MYRIADPRO-CONDIT.woff
-rwxr-xr-x@ 1 maximveksler staff 61848 Mar 17 2014 MYRIADPRO-REGULAR.woff
-rwxr-xr-x@ 1 maximveksler staff 62448 Mar 17 2014 MYRIADPRO-SEMIBOLD.woff
-rwxr-xr-x@ 1 maximveksler staff 66232 Mar 17 2014 MYRIADPRO-SEMIBOLDIT.woff
➜ Client git:(feature/trivia-game-ui-2) ✗ cat src/containers/GameModule.css
.GameModule {
padding: 15px;
}
@font-face {
font-family: 'Myriad Pro Regular';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Regular'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-REGULAR.woff') format('woff');
}
@font-face {
font-family: 'Myriad Pro Condensed';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Condensed'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-COND.woff') format('woff');
}
@font-face {
font-family: 'Myriad Pro Semibold Italic';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Semibold Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLDIT.woff') format('woff');
}
@font-face {
font-family: 'Myriad Pro Semibold';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Semibold'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLD.woff') format('woff');
}
@font-face {
font-family: 'Myriad Pro Condensed Italic';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Condensed Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-CONDIT.woff') format('woff');
}
@font-face {
font-family: 'Myriad Pro Bold Italic';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Bold Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDIT.woff') format('woff');
}
@font-face {
font-family: 'Myriad Pro Bold Condensed Italic';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Bold Condensed Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCONDIT.woff') format('woff');
}
@font-face {
font-family: 'Myriad Pro Bold Condensed';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Bold Condensed'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCOND.woff') format('woff');
}
@font-face {
font-family: 'Myriad Pro Bold';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Bold'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLD.woff') format('woff');
}
%PUBLIC_URL%
Kann in einer CSS-Datei nicht funktionieren (und ist unnötig). Wie im Handbuch beschrieben, sollten Sie in fast allen Fällen JS-Importe verwenden, nicht den öffentlichen Ordner.Antworten:
Es gibt zwei Möglichkeiten:
Importe verwenden
Dies ist die vorgeschlagene Option. Es stellt sicher, dass Ihre Schriftarten die Build-Pipeline durchlaufen, beim Kompilieren Hashes abrufen, damit das Browser-Caching ordnungsgemäß funktioniert, und dass Kompilierungsfehler angezeigt werden, wenn die Dateien fehlen.
Wie unter „Hinzufügen von Bildern, Schriftarten und Dateien“ beschrieben , muss eine CSS-Datei aus JS importiert werden. Zum Beispiel standardmäßig
src/index.js
Importesrc/index.css
:Eine solche CSS-Datei durchläuft die Build-Pipeline und kann auf Schriftarten und Bilder verweisen. Wenn Sie beispielsweise eine Schriftart eingeben
src/fonts/MyFont.woff
, können Sieindex.css
Folgendes einschließen:Beachten Sie, wie wir einen relativen Pfad verwenden, der mit beginnt
./
. Dies ist eine spezielle Notation, mit der die Build-Pipeline (unterstützt von Webpack) diese Datei erkennen kann.Normalerweise sollte dies ausreichen.
Mit
public
OrdnerWenn Sie aus irgendeinem Grund die Build-Pipeline nicht verwenden möchten und dies stattdessen auf „klassische Weise“ tun möchten , können Sie den
public
Ordner verwenden und Ihre Schriftarten dort ablegen.Der Nachteil dieses Ansatzes ist, dass die Dateien beim Kompilieren für die Produktion keine Hashes erhalten, sodass Sie ihre Namen jedes Mal aktualisieren müssen, wenn Sie sie ändern. Andernfalls werden die alten Versionen von Browsern zwischengespeichert.
Wenn Sie dies auf diese Weise tun möchten, legen Sie die Schriftarten irgendwo in dem
public
Ordner ab, z. B. inpublic/fonts/MyFont.woff
. Wenn Sie diesem Ansatz folgen, sollten Sie auch CSS-Dateien inpublic
Ordner ablegen und nicht aus JS importieren, da das Mischen dieser Ansätze sehr verwirrend sein wird. Wenn Sie es also trotzdem tun möchten, haben Sie eine Datei wiepublic/index.css
. Sie müssten<link>
dieses Stylesheet manuell hinzufügen vonpublic/index.html
:Und darin würden Sie die reguläre CSS-Notation verwenden:
Beachten Sie, wie ich
fonts/MyFont.woff
als Pfad verwende. Dies liegt daran, dassindex.css
es sich impublic
Ordner befindet, sodass es über den öffentlichen Pfad bereitgestellt wird (normalerweise ist es das Serverstammverzeichnis, aber wenn Sie es auf GitHub Pages bereitstellen und Ihrhomepage
Feld auf festlegenhttp://myuser.github.io/myproject
, wird es von bereitgestellt/myproject
). Befinden sichfonts
jedoch auch impublic
Ordner, so werden siefonts
relativ (entwederhttp://mywebsite.com/fonts
oderhttp://myuser.github.io/myproject/fonts
) bedient. Deshalb verwenden wir den relativen Pfad.Da wir in diesem Beispiel die Build-Pipeline vermeiden, wird nicht überprüft, ob die Datei tatsächlich vorhanden ist. Deshalb empfehle ich diesen Ansatz nicht. Ein weiteres Problem ist, dass unsere
index.css
Datei nicht minimiert wird und keinen Hash erhält. Für die Endbenutzer wird es also langsamer, und Sie riskieren, dass die Browser alte Versionen der Datei zwischenspeichern.Welche Art zu verwenden?
Fahren Sie mit der ersten Methode fort („Verwenden von Importen“). Ich habe nur den zweiten beschrieben, da Sie dies versucht haben (nach Ihrem Kommentar zu urteilen), aber er hat viele Probleme und sollte nur der letzte Ausweg sein, wenn Sie an einem Problem arbeiten.
quelle
ttf
Schriftart hinzufügt , sollten Sie dem *truetype
stattttf
als Parameter geben .format
otf
, müssen Sie setzenopentype
.Hier sind einige Möglichkeiten, dies zu tun:
1. Schriftart importieren
Wenn Sie beispielsweise Roboto verwenden möchten, installieren Sie das Paket mit
oder
In index.js:
Es gibt npm-Pakete für viele Open Source-Schriftarten und die meisten Google-Schriftarten. Sie können alle Schriftarten hier sehen . Alle Pakete stammen aus diesem Projekt .
2. Für Schriftarten, die von Dritten gehostet werden
Zum Beispiel können Sie unter Google Fonts unter fonts.google.com Links finden, die Sie in Ihre einfügen können
public/index.html
Es wird so sein
oder
3. Laden Sie die Schriftart herunter und fügen Sie sie Ihrem Quellcode hinzu.
Laden Sie die Schriftart herunter. Für Google-Schriftarten können Sie beispielsweise zu fonts.google.com gehen . Klicken Sie auf den Download-Button, um die Schriftart herunterzuladen.
Verschieben Sie die Schriftart in das
fonts
Verzeichnis in Ihremsrc
VerzeichnisFügen
App.css
Sie dies jetzt hinzuFür das
ttf
Format müssen Sie erwähnenformat('truetype')
. Zumwoff
,format('woff')
Jetzt können Sie die Schriftart in Klassen verwenden.
4. Verwenden des Web-Font-Loader-Pakets
Installieren Sie das Paket mit
oder
In
src/index.js
können Sie dies importieren und die benötigten Schriftarten angebenquelle
fonts
Ordner nicht untersrc
, sondern unterpublic
zu platzieren? Ich habe es versucht, aber es scheint nicht erlaubt ...For ttf format, you have to mention format('truetype'). For woff, format('woff')
habe es für mich getan! Danke!Es wird so geöffnet:
4, Kopieren Sie diesen Code und fügen Sie ihn in Ihre style.css ein. Verwenden Sie diese Schriftart einfach wie folgt:
Ergebnis:
quelle
Sie können das WebFont- Modul verwenden, das den Vorgang erheblich vereinfacht.
quelle
Ich habe solche Fehler gemacht.
Auf diese Weise funktioniert es richtig
quelle
Ich habe den ganzen Morgen damit verbracht, ein ähnliches Problem zu lösen, nachdem ich auf dieser Stapelfrage gelandet war. Ich habe Dans erste Lösung in der obigen Antwort als Startpunkt verwendet.
Problem
Ich habe eine Entwickler- (dies ist auf meinem lokalen Computer), Staging- und Produktionsumgebung. Meine Staging- und Produktionsumgebungen befinden sich auf demselben Server.
Die App wird für das Staging über bereitgestellt
acmeserver/~staging/note-taking-app
und die Produktionsversion lebt beiacmeserver/note-taking-app
(Schuld an der IT).Alle Mediendateien wie Schriftarten wurden auf dev (dh
react-scripts start
) einwandfrei geladen .Als ich jedoch Staging- und Produktions-Builds erstellte und hochlud, während die Dateien
.css
und.js
ordnungsgemäß geladen wurden, waren dies bei den Schriftarten nicht der Fall. Das kompilierte.css
Datei schien einen korrekten Pfad zu haben, aber die http-Anforderung des Browsers erhielt einen sehr falschen Pfad (siehe unten).Die kompilierte
main.fc70b10f.chunk.css
Datei:Die http-Anfrage des Browsers wird unten angezeigt. Beachten Sie, wie es hinzugefügt wird,
/static/css/
wenn die Schriftartdatei nur noch vorhanden ist, und/static/media/
wie der Zielordner dupliziert wird. Ich habe ausgeschlossen, dass die Serverkonfiguration der Schuldige ist.Das
Referer
ist auch teilweise schuld.Für die
package.json
Datei wurde diehomepage
Eigenschaft festgelegt./note-taking-app
. Dies verursachte das Problem.Lösung
Das war langwierig - aber die Lösung ist:
PUBLIC_URL
env-Variable abhängig von der Umgebunghomepage
Eigenschaft aus derpackage.json
DateiUnten ist meine
.env-cmdrc
Datei. Ich benutze.env-cmdrc
über regelmäßig,.env
weil es alles in einer Datei zusammenhält.Das Routing über
react-router-dom
funktioniert auch einwandfrei - verwenden Sie einfach diePUBLIC_URL
env-Variable alsbasename
Eigenschaft.Die Serverkonfiguration ist so eingestellt, dass alle Anforderungen an die
./index.html
Datei weitergeleitet werden.Schließlich sehen Sie hier, wie die kompilierte
main.fc70b10f.chunk.css
Datei aussieht, nachdem die besprochenen Änderungen implementiert wurden.Lesestoff
https://create-react-app.dev/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env
https://create-react-app.dev/docs/deployment#serving-apps-with-client-side-routing
https://create-react-app.dev/docs/advanced-configuration
PUBLIC_URL
Umgebungsvariablequelle