Verwenden Sie @font-face, um Sonderzeichen auf Webseiten zu implementieren (benutzerdefinierte Schriftarten erstellen)

Zuerst gehen wir zum Ordner „Fonts“ auf dem Laufwerk C, suchen die Schriftart „WEBDINGS.TTF“ und kopieren sie auf den Desktop. Als nächstes benötigen wir eine Software namens „Fontforge“, die die Funktion zum Erstellen benutzerdefinierter Schriftarten ermöglicht. Wir werden sie verwenden, um eine für uns geeignete Schriftartenbibliothek zu erstellen.

Nach dem Download entpacken Sie es, kopieren die Schriftart WEBDINGS.TTF hinein, führen fontforge.bat aus und wählen die Schriftartdatei aus. Anschließend wird diese Oberfläche angezeigt:

Es gibt viele grafische Charaktere. Haben Sie festgestellt, dass viele davon schon früher verwendet wurden, damals aber mit Bildern umgesetzt wurden?

Als nächstes müssen wir die benötigten Zeichen auswählen und in einer anderen Schriftdatei speichern. Da die meisten Zeichen in der Datei WEBDINGS.TTF nicht verwendet werden, ist sie etwas zu groß, um diese Datei direkt als unsere Zeichenbibliothek zu verwenden. Wir müssen also nur die Zeichen auswählen, die wir benötigen. Um dies zu tun, erstellen wir zunächst eine leere Schriftdatei, klicken auf Datei->Neu, wählen dann die benötigten Zeichen aus und kopieren sie in die neu erstellte Schriftdatei, beispielsweise:

Anschließend speichern und „Schriftarten generieren“ auswählen:

Speichern Sie anschließend die Datei mit der Erweiterung .ttf:

Damit ist unsere Schriftartdatei fertig. Es ist jedoch noch nicht vorbei, da der IE nur .eof und nicht .ttf erkennt, sodass wir noch andere Schriftdateien generieren müssen. Zu diesem Thema habe ich vor langer Zeit einen Artikel geschrieben, in dem die Vorgehensweise erläutert wird. Daher werde ich sie nicht im Detail vorstellen. Der Artikellink lautet: „Die tatsächliche Vorgehensweise bei der Verwendung beliebiger Schriftarten auf Webseiten“.

Wenn Ihnen die Bedienung zu umständlich erscheint, können Sie schließlich eine von mir zusammengestellte Zeichenbibliothek herunterladen, die sich hauptsächlich auf Pfeile konzentriert, da diese so häufig verwendet werden.
Herunterladen

Obwohl hierdurch die Gesamtgröße der geladenen Auslagerungsdatei zunimmt, ist die Bedienbarkeit vielfältiger, wenn Sie über eine eigene Zeichenbibliothek verfügen. Denn wir können die Größe und Farbe der Zeichen und sogar CSS3-Effekte wie Schatten und Spiegeln steuern, aber wenn wir die Farbe eines Bildes ändern möchten, müssen wir es modifizieren oder ein neues erstellen, was nicht sehr flexibel ist.

PS: In meinem EonerCMS wurden die Schaltflächen oben rechts und unten rechts im Fenster durch Zeichen ersetzt, und der Effekt ist ziemlich gut.

PS2: Danke an @小熊 für die Idee. Da die Zeichenrotation durch CSS3 und Filter erreicht werden kann, können wir beim Erstellen der Zeichenbibliothek nur einen Pfeil in die vier Richtungen aufzeichnen und ihn durch Code rotieren, um die Größe der Zeichenbibliotheksdatei zu reduzieren.