Einführung mehrerer benutzerdefinierter Schriftarten in CSS3
|
Heute habe ich ein Problem in HTML gefunden. Es stehen uns viele Standardschriftarten zur Verfügung, aber mit Ausnahme von „Bold“, „Song“, „Kai“ und anderen Schriftarten, die Chinesisch unterstützen, kennt der Rest keine chinesischen Schriftarten. Was ist, wenn wir unsere Lieblingsschriftarten verwenden müssen? Ist es möglich, benutzerdefinierte heruntergeladene Schriftarten in CSS3 einzuführen? Wenn möglich, wie sollten wir es vorstellen? Schauen wir uns nun die Lösung für diese Reihe von Problemen an. Nichts ist besser, als die Wirkung zu sehen. Hier sind die Auswirkungen von drei Schriftarten auf der Webseite: „Spring Festival Couplets Standard Font“, „Jiangnan Artistic Font“ und „Mao Zhedong Artistic Font“: Google Chrome:
Feuerfuchs:
Das Obige ist eine Demonstration der Wirkung, nur zu Ihrer Information! Zuerst müssen wir eine Schriftart importieren. Wir sollten eine solche Schriftart haben (Benutzer brauchen sie nicht). Laden Sie die Schriftart herunter und legen Sie sie in den Schriftartenordner des Projekts.
Die Schriftarten könnt ihr online oder hier herunterladen. Nach Abschluss des Downloads stellen wir euch die Schriftarten vor. HTML Quelltext: <!DOCTYPE html> <html> <Kopf> <meta charset="UTF-8"> <title>Schriftdateitest</title> </Kopf> <Text> <div class="chunlian">Standardschriftarttest für Frühlingsfest-Couplets</div> <div class="jiangnan">Jiangnan Künstlerischer Schrifttest</div> <div class="maozedong">Mao Zedong-Schrifttest</div> </body> </html> Dann die CSS-Style-Einstellungen:
<style type="text/css">
@Schriftart {
Schriftfamilie: „chunlian“;
Quelle: URL (Schriftart/chunlian.ttf);
}
@Schriftart {
Schriftfamilie: „jiangnan“;
quelle:url(Schriftart/jiangnan.ttf);
}
.chunlian{
Schriftfamilie: „chunlian“;
Schriftgröße: 50px;
Textschatten: keiner;
}
.jiangnan{
Schriftfamilie: „jiangnan“;
Schriftgröße: 40px;
}
@Schriftart {
Schriftfamilie: „maozedong“;
quelle:url(font/maozedong.ttf);
}
.maozedong{
Schriftfamilie: „maozedong“;
Schriftgröße: 50px;
Textschatten: keiner;
}
</Stil>Wenn Sie andere Schriftarten hinzufügen möchten, schreiben Sie einfach @font-face in CSS! Dies ist das Ende dieses Artikels über die Einführung mehrerer benutzerdefinierter Schriftarten in CSS3. Weitere Informationen zur Einführung benutzerdefinierter Schriftarten in CSS3 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Warum MySQL die Verwendung von Nullspalten mit Standardwerten nicht empfiehlt
>>: Vue2.0 implementiert adaptive Auflösung
Artikel empfehlen
Beispielcode zur Implementierung einer QR-Code-Scanbox mit CSS
Normalerweise haben wir ein Scan-Feld, wenn wir d...
Detaillierte Schritte zum Konfigurieren der MySQL-Remoteverbindung unter Alibaba Cloud
Vorwort Wie wir alle wissen, unterstützt das auf ...
Detaillierte Schritte zur Verwendung von Redis in Docker
1. Einleitung Dieser Artikel zeigt Ihnen, wie Sie...
Beispiel für das Einrichten einer Whitelist in Nginx mithilfe des Geomoduls
Ursprüngliche Konfiguration: http { ...... Verbin...
Erweiterte Docker-Methode zur schnellen Erweiterung
1. Befehlsmethode Führen Sie den Nginx-Dienst im ...
Verwenden Sie xshell, um eine Verbindung zum Linux-Server herzustellen
Vorteile der Verwendung von xshell zur Verbindung...
Beispiel für die Erstellung eines XML-Online-Editors mit js
Inhaltsverzeichnis Vorwort Die Notwendigkeit von ...
Eine detaillierte Einführung in Linux-Dateiberechtigungen
Die Stärke von Linux liegt in seinem Mehrbenutzer...
Benutzerdefinierte Docker-Netzwerkcontainer-Verbindung
Inhaltsverzeichnis Vorwort -Link Benutzerdefinier...
Vue SPA-Lösung zur Optimierung des ersten Bildschirms
Inhaltsverzeichnis Vorwort Optimierung SSR Import...
Detailliertes Tutorial zum Herstellen einer Verbindung zu einem Remote-Server-Docker zum Bereitstellen eines Spring Boot-Projekts in IDEA
Vorbereitende Schritte Habe einen Cloud-Server, m...
Lösen Sie das Problem der VScode-Konfiguration durch Remote-Debugging des Linux-Programms
Werfen wir einen Blick auf das Problem des VScode...
Beispielcode zum Konfigurieren von Überwachungselementen und aggregierten Grafiken in Zabbix
1. Installieren Sie Zabbix Agent, um den lokalen ...
Eine kurze Diskussion über MySQL-Index-Designprinzipien und die Unterschiede zwischen gängigen Indizes
Indexdefinition: Es handelt sich um eine separate...
Uniapp implementiert Beispielcode für die Anmeldung mit DingTalk-Scancode
Da Uniapp nicht über eine autorisierte DingTalk-A...