Ich hatte eine Website mit React.js und Webpack erstellt .
Ich möchte Google-Schriftarten auf der Webseite verwenden, daher habe ich den Link in den Abschnitt eingefügt.
Google Fonts
<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">
Und CSS einstellen
body{
font-family: 'Bungee Inline', cursive;
}
Es funktioniert jedoch nicht.
Wie kann ich dieses Problem lösen?
reactjs
webpack
google-font-api
Kevin Hsiao
quelle
quelle
<link>
in den Seitenkopf, nicht in Ihre Reaktions-App, richtig? Geben Sie diefont-family
Stelle an einer anderen Stelle in Ihrem Stylesheet oder direkt auf Ihren Elementen an?{ test: /(\.css$)/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] }, { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
Antworten:
Führen Sie in einer Art Haupt- oder Erstlade-CSS-Datei einfach Folgendes aus:
Sie müssen keine Art von @ font-face usw. einbinden. Die Antwort, die Sie von der Google-API erhalten, ist sofort einsatzbereit und ermöglicht die Verwendung von Schriftfamilien wie gewohnt.
Fügen Sie dann in Ihrer Hauptreaktions-App JavaScript oben Folgendes ein:
Was ich tatsächlich gemacht habe, war ein
app.css
Importfonts.css
mit ein paar Schriftimporten. Einfach zur Organisation (jetzt weiß ich, wo sich alle meine Schriftarten befinden). Wichtig ist, dass Sie zuerst die Schriftarten importieren.Beachten Sie, dass alle Komponenten, die Sie in Ihre React-App importieren, nach dem Stilimport importiert werden sollten. Insbesondere, wenn diese Komponenten auch ihre eigenen Stile importieren. Auf diese Weise können Sie sicher sein, dass die Stile sortiert sind. Aus diesem Grund ist es am besten, Schriftarten oben in Ihre Hauptdatei zu importieren (vergessen Sie nicht, Ihre endgültige gebündelte CSS-Datei zu überprüfen, um zu überprüfen, ob Sie Probleme haben).
Es gibt einige Optionen, mit denen Sie die Google Font-API übergeben können, um beim Laden von Schriftarten usw. effizienter zu sein. Siehe offizielle Dokumentation: Erste Schritte mit der Google Fonts-API
Bearbeiten, Hinweis: Wenn Sie mit einer "Offline" -Anwendung arbeiten, müssen Sie möglicherweise die Schriftarten herunterladen und über Webpack laden.
quelle
Google-Schriftarten in React.js?
Öffnen Sie Ihr Stylesheet, dh app.css, style.css (welchen Namen Sie haben), es spielt keine Rolle, öffnen Sie einfach das Stylesheet und fügen Sie diesen Code ein
und vergessen Sie nicht, die URL Ihrer gewünschten Schriftart zu ändern, sonst funktioniert es einwandfrei
und benutze dies als:
quelle
Wenn Sie die Umgebung "React App erstellen" verwenden, fügen Sie einfach die @ import-Regel als solche zu index.css hinzu :
Importieren index.css in Ihre React-Hauptanwendung:
React bietet Ihnen die Wahl zwischen Inline-Stil, CSS-Modulen oder gestalteten Komponenten, um CSS anzuwenden:
quelle
Sie sollten dieses Tutorial sehen: https://scotch.io/@micwanyoike/how-to-add-fonts-to-a-react-project
Ich habe gerade diese Methode ausprobiert und ich kann sagen, dass sie sehr gut funktioniert;)
quelle
Fügen Sie in Ihrer CSS-Datei, z. B. App.css in einer App zum Erstellen und Reagieren, einen Schriftartenimport hinzu. Beispielsweise:
Fügen Sie dann einfach die Schriftart zum DOM-Element in derselben CSS-Datei hinzu.
quelle
Hatte das gleiche Problem. Es stellte sich heraus, dass ich
"
statt verwendet habe'
.verwenden
@import url('within single quotes');
sonicht
@import url("within double quotes");
soquelle
Ich habe @import und @ font-face in meine CSS-Datei eingefügt und es hat funktioniert.
quelle
@import
sollten nur ausreichen. stackoverflow.com/questions/48057801/…Eine weitere Option für alle guten Antworten hier ist das npm-Paket
react-google-font-loader
, das Sie hier finden .Die Verwendung ist einfach:
Dann können Sie einfach den Familiennamen in Ihrem CSS verwenden:
Haftungsausschluss: Ich bin der Autor des
react-google-font-loader
Pakets.quelle
Wenn jemand nach einer Lösung mit (.less) sucht, versuchen Sie es unten. Öffnen Sie Ihre Haupt- oder weniger gemeinsame Datei und verwenden Sie sie wie unten beschrieben.
quelle
Es könnte das selbstschließende Tag des Links am Ende sein. Versuchen Sie:
und in Ihrer main.css-Datei versuchen Sie:
quelle
Hier sind zwei verschiedene Möglichkeiten, wie Sie Ihrer Reaktions-App Schriftarten hinzufügen können.
Hinzufügen lokaler Schriftarten
Erstellen Sie einen neuen Ordner mit dem Namen
fonts
in Ihremsrc
Ordner.Laden Sie die Google-Schriftarten lokal herunter und legen Sie sie im
fonts
Ordner ab.Öffnen Sie Ihre
index.css
Datei und geben Sie die Schriftart an, indem Sie auf den Pfad verweisen.Hier habe ich eine
Rajdhani
Schriftart hinzugefügt .Jetzt können wir unsere Schriftart in solchen CSS-Klassen verwenden.
Hinzufügen von Google-Schriftarten
Wenn Sie Google-Schriftarten (API) anstelle lokaler Schriftarten verwenden möchten, können Sie diese wie folgt hinzufügen.
In ähnlicher Weise können Sie es auch
index.html
mit demlink
Tag in die Datei einfügen.(ursprünglich veröffentlicht unter https://reactgo.com/add-fonts-to-react-app/ )
quelle