Praktische Funktionsweise der Verwendung beliebiger Schriftarten auf einer Webseite mit Demonstration

Praktische Funktionsweise der Verwendung beliebiger Schriftarten auf einer Webseite mit Demonstration

Ich habe bereits einige Nachforschungen zum Thema „Einbetten nicht systemintegrierter Schriftarten in Webseiten“ angestellt. Obwohl dies technisch machbar ist, hat es in China keine große praktische Bedeutung, da eine chinesische Schriftartdatei mindestens 20 MB groß ist und die von jedem Browser unterstützten Schriftartdateien unterschiedlich sind. Mit anderen Worten: Auf der Serverseite müssen 2-3 Schriftartdateien unterschiedlichen Formats vorhanden sein, um mit jedem Browser zurechtzukommen. Das entsprechende Bild können Sie unten sehen.

Ich dachte, dass die kleine Recherche, die ich vorher durchgeführt hatte, für meine künftige Arbeit nicht von Nutzen sein würde, aber sie stellte sich als nützlich heraus. Ein Kunde hat darum gebeten, die Uhrzeit anzuzeigen, aber die Schriftart der Uhrzeit muss mit der einer Digitaluhr übereinstimmen, wie in der Abbildung gezeigt:

Zuerst müssen wir diese Schriftart finden. Da diese Schriftart nur im TTF-Format vorliegt, müssen wir sie in verschiedene andere Formate konvertieren. Für die Konvertierung gibt es Software und Online-Dienste. Ich werde hier nicht angeben, welche ich verwenden soll.

Nach der Konvertierung können Sie den CSS-Code schreiben

Code kopieren
Der Code lautet wie folgt:

@Schriftart {
font-family: 'hurra'; /*Benennen Sie Ihre benutzerdefinierte Schriftart*/
Quelle: URL('http://demo.jb51.net/js/2013/webfontry/hooray.eot');
Quelle: URL('http://demo.jb51.net/js/2013/webfontry/hooray.eot?#iefix') Format('eot'),
URL('http://demo.jb51.net/js/2013/webfontry/hooray.woff') Format('woff'),
URL('http://demo.jb51.net/js/2013/webfontry/hooray.ttf') Format('TrueType'),
URL('http://demo.jb51.net/js/2013/webfontry/hooray.svg#webfontjKg17VrE') Format('svg');
}

Was den Aufruf betrifft, definieren Sie wie üblich bei Bedarf die Schriftfamilie und den soeben genannten Namen als Schriftnamen:

Code kopieren
Der Code lautet wie folgt:

Schriftfamilie: „Hurra“;

Laden Sie die vollständige Demo herunter. Online Demo

Ich habe die Gründe für viele Dinge im Artikel nicht erklärt, da es im Internet viele Informationen zum Thema „Verwendung beliebiger Schriftarten auf Webseiten“ gibt, aber nur wenige Beispiele. Wenn Sie etwas nicht verstehen, gehen Sie einfach zu Baidu oder Google und Sie werden es verstehen.

Anhang 1: Zwei neue Websites zur Online-Schriftkonvertierung wurden hinzugefügt: FontsQuirrel und onlinefontconverter.

<<:  Eine kurze Erläuterung zur Lösung des Depends_on-Reihenfolgeproblems in Docker-Compose

>>:  MySQL lernen: Fünf Hauptbeschränkungen von Datenbanktabellen im Detail für Anfänger erklärt

Artikel empfehlen

So stellen Sie Tomcat stapelweise mit Ansible bereit

1.1 Aufbau der Verzeichnisstruktur Dieser Vorgang...

Tutorial zum Erstellen eines CA-Zertifikats unter Linux Centos8

Installieren der erforderlichen Dateien Yum insta...

Teilen Sie 5 hilfreiche CSS-Selektoren, um Ihr CSS-Erlebnis zu bereichern

Dank unserer umfassenden CSS-Erfahrung als Webdesi...

Tutorial zur MySQL-SQL-Optimierung: IN- und RANGE-Abfragen

Lassen Sie uns zunächst über die in()-Abfrage spr...

Detaillierte Analyse der Prinzipien und der Verwendung von MySQL-Ansichten

Vorwort: In MySQL sind Ansichten wahrscheinlich e...

Über nginx zur Implementierung des Jira-Reverse-Proxys

Zusammenfassung: Nginx-Reverse-Proxy für JIRA kon...

Node.js verwendet die Express-Fileupload-Middleware zum Hochladen von Dateien

Inhaltsverzeichnis Initialisieren des Projekts Sc...

Installationstutorial für Docker unter Linux

Das Docker-Paket ist bereits im Standard-Reposito...

Analyse des kumulativen Aggregationsprinzips von MySQL und Anwendungsbeispiele

Dieser Artikel veranschaulicht anhand von Beispie...

Native JS-Implementierung des Ladefortschrittsbalkens

Dieser Artikel zeigt einen Spezialeffekt für dyna...

Detailliertes Tutorial zum Erstellen eines privaten Git-Servers unter Linux

1. Server-Setup Das Remote-Repository unterscheid...

Beispielcode zum Generieren eines QR-Codes mit js

Vor einiger Zeit musste das Projekt die Funktion ...

Der Unterschied zwischen Löschen, Abschneiden und Löschen und wie man wählt

Vorwort Letzte Woche fragte mich ein Kollege: „Br...