Detaillierte Erklärung zur Einführung benutzerdefinierter Schriftarten (Font-Face) in CSS

Warum habe ich das verwendet? Alles begann mit der Erstellung des Posters. Es war eine stürmische Nacht. . .

Okay, hören wir auf, Unsinn zu reden und kommen wir zurück zum Thema. Warum verwenden wir es? Weil der Browser die Schriftart nicht hat.

Warum solltest du es mir dann erzählen? Ich selbst werde nicht zur W3C-Schule gehen, um zu lesen und zu lernen. Ja, aber wäre es nicht schneller und einfacher, wenn ich Ihnen

Anwendung

@Schriftart{
     font-family: „Sie können der Schriftart einen beliebigen Namen geben“; 
     Quelle: URL ('../Schriftart/Schriftname.eot');
     src:url('../Schriftart/Schriftname.woff') format('woff'),
         url('../Schriftart/Schriftname.ttf') format('truetype'),
         url('../font/Schriftname.svg') format('svg');
}

//Fügen Sie im HTML-Code ein h1 oder einen anderen Text hinzu und schreiben Sie den gewünschten Spezialtext hinein h1{font-size:36px; color:#ccc;font-family: "Schriftname bleibt Ihnen überlassen";}

Hier ist Schluss. Vielen Dank fürs Zuschauen (Hey, kannst du bitte aufhören, Eier zu werfen und Kohlköpfe kaputtzumachen? Ich rede weiter);

1. Der Schlüssel liegt darin, wo man die Schriftart findet. Ich weiß, wie man sie benutzt, aber ohne die Schriftart ist sie nutzlos. .

Schriftart-Download: https://www.jb51.net/fonts/

Hier können Sie die von unserem System allgemein unterstützten Schriftarten finden, herunterladen und im Schriftartenordner ablegen (der Schriftartenordner kann sich auf derselben Ebene wie CSS und Bilder befinden).

2. Die heruntergeladene Schriftart ist zu groß, was zu einer schlechten Leistung führt (sonst gibt es viele Probleme)

Lösung: Zizhu (Es kann den erforderlichen Teil der Schriftart extrahieren, der normalerweise nur wenige KB groß ist, also sollte es in Ordnung sein)

Offizielle Font Spider-Website: http://font-spider.org/

1) Wenn Sie Zizhu verwenden möchten, müssen Sie zuerst Node oder Git installieren, was als Front-End in Ordnung ist.

2) Beginnen Sie nach der Installation mit der Installation von Font-Spider. Verwenden Sie die Befehlszeile oder Git, um diesen Satz zu kopieren: npm install font-spider -g Sie können auch den Taobao-Spiegel verwenden

3) Nach einer langen Wartezeit können wir nach Abschluss der Installation zunächst font-spider -V testen. Die Versionsnummer zu sehen beweist, dass Sie es erfolgreich installiert haben. Schön.

4) Denken Sie daran, die heruntergeladenen Schriftarten mit mehreren Megabyte in den gerade erwähnten Schriftartenordner zu legen.

5) Erstelle ein neues CSS-Stylesheet, definiere die Schriftart, kopiere Folgendes hinein und trage den eben benannten Schriftnamen in „font“ ein. Damit sind alle Formate der Schriftart definiert.

@Schriftart{
     font-family: „Sie können der Schriftart einen beliebigen Namen geben“; 
     Quelle: URL ('../Schriftart/Schriftname.eot');
     src:url('../Schriftart/Schriftname.woff') format('woff'),
         url('../Schriftart/Schriftname.ttf') format('truetype'),
         url('../font/Schriftname.svg') format('svg');
}

//Fügen Sie im HTML-Code ein h1 oder einen anderen Text hinzu und schreiben Sie den gewünschten Spezialtext hinein h1{font-size:36px; color:#ccc;font-family: "Schriftname bleibt Ihnen überlassen";}

6) Der wichtigste Schritt ist die Generierung der benötigten Abkürzungen. Geben Sie font-spider+space+path in git oder node ein: font-spider ./demo/*.html

Zum Beispiel:

Wenn sich die Festplatte im Stammverzeichnis befindet, können Sie font-spider demo.html
direkt verwenden font-spider demo.html


oder

font-spider C:\Users\13246\Desktop\cropper\demo.html

Natürlich demonstriere ich dies, daher hängt der spezifische Pfad von Ihrem Computer ab.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.