Heim Web-Frontend CSS-Tutorial Wie kann ich Google Web Fonts ohne HTML Access in mein CSS importieren?

Wie kann ich Google Web Fonts ohne HTML Access in mein CSS importieren?

Dec 07, 2024 pm 05:57 PM

How Can I Import Google Web Fonts into My CSS Without HTML Access?

Google Web Fonts in CSS-Dateien ohne HTML-Zugriff importieren

Wenn Sie mit einem CMS arbeiten, bei dem Sie eingeschränkten Zugriff auf das HTML-Dokument haben, ist dies der Fall Es kann schwierig sein, Google Web-Schriftarten zu importieren. Allerdings gibt es in CSS eine Methode, mit der Sie dies erreichen können:

@import-Methode:

Verwenden Sie die @import-Direktive wie folgt:

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
Nach dem Login kopieren

Ersetzen Sie „Open Sans“ durch den Namen Ihrer gewünschten Schriftart. URL-kodieren Sie alle Leerzeichen im Schriftartnamen, indem Sie zwischen jedem Wort ein „ “-Zeichen einfügen.

Zusätzliche Überlegungen:

  • Platzieren Sie die @import-Direktive an der Stelle Ganz am Anfang Ihrer CSS-Datei, vor allen Regeln.
  • Verwenden Sie URL-Kodierung für Schriftarten mit mehreren Wörter.
  • Stellen Sie sicher, dass die Schriftart bei Google Fonts verfügbar ist.

Google Fonts-Anpassung:

Google Fonts bietet eine automatische Option zur Generierung die @import-Anweisung für Sie:

  • Wählen Sie Ihre gewünschte Schriftart aus.
  • Klicken das Symbol „ “ neben dem Namen der Schriftart.
  • Erweitern Sie den Container „1 Familie ausgewählt“.
  • Wählen Sie Anpassungsoptionen auf der Registerkarte „Anpassen“.
  • Wechseln Sie zu Klicken Sie auf die Registerkarte „Einbetten“ und klicken Sie auf „@import“.
  • Kopieren Sie das CSS innerhalb des