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!
Als nächstes sehen wir uns an, wie es in CSS eingeführt wird:

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

Lösen Sie das Problem der Angabe der UDP-Portnummer im Docker

Einführung mehrerer benutzerdefinierter Schriftarten in CSS3

Lösen Sie das Problem der Angabe der UDP-Portnummer im Docker

Zusammenfassung der Vue-Datenreaktionsfähigkeit

Detaillierte Erläuterung nativer Javascript-Vererbungsmethoden und ihrer Vor- und Nachteile

Mehrere Möglichkeiten zum Planen der Sicherung einer MySQL-Datenbank (umfassend)

MySQL 5.7-Clusterkonfigurationsschritte

Ein Leitfaden zur Optimierung leistungsstarker Websites

Zusammenfassung der speicherbezogenen Parameter von MySQL 8.0

JavaScript-Fehlerbehandlung try..catch...finally + umfasst throw+TypeError+RangeError

So verwenden Sie den Skeleton-Bildschirm im Vue-Projekt

CentOS7 64-Bit-Installation MySQL Grafik-Tutorial

Artikel empfehlen

Verwendung der VUE-Renderfunktion und ausführliche Erklärung

Vue + Element zur dynamischen Anzeige von Hintergrunddaten zu Optionen

JavaScript-Tippspiel

Erweiterte Docker-Methode zur schnellen Erweiterung

Praktisches MySQL + PostgreSQL Batch-Insert-Update insertOrUpdate

Natives JS zur Implementierung eines Bildkarussells. JS zur Implementierung eines kleinen Werbe-Plugins.

Detaillierte Erläuterung der Docker-Container-Lebenszyklusarchitektur und der Unterschiede zwischen dieser und VM

Detaillierte Erläuterung der Fallstricke des Nginx-Proxy-Socket.io-Dienstes

So löschen Sie die MySQL-Registrierung

Mit CSS3 implementierte Schaltfläche zum Hovern von Bildern

Analyse der Vorteile von Klassen gegenüber IDs beim Kommentieren von HTML-Elementen

Grafisches Tutorial zur MySQL8-Installationsversion

CSS-Beschreibung des Implementierungscodes zur Anzeige von Text am Ende des horizontalen Fortschrittsbalkens

Detaillierte Erläuterung spezieller Phänomene, Beispiele für die Sleep-Funktion in MySQL

Zusammenfassung der Konfigurationsprobleme von Nginx-Standort und Proxy-Pass-Pfad