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

Detaillierte Erklärung des Unterschieds zwischen der IE8-Kompatibilitätsansicht (IE7-Modus) und dem eigenständigen IE7

Einführung mehrerer benutzerdefinierter Schriftarten in CSS3

Detaillierte Erklärung des Unterschieds zwischen der IE8-Kompatibilitätsansicht (IE7-Modus) und dem eigenständigen IE7

So verwenden Sie die MySQL-Indexzusammenführung

Analyse und Meinungen zur Designstruktur des großen Bildes auf der Homepage der Taobao Mall (Bild)

Der Implementierungsprozess des langen Drückens zum Identifizieren des QR-Codes im WeChat-Applet

Eine kurze Erläuterung verschiedener Möglichkeiten zum Übergeben von Parametern beim React-Routing

Grundlegende Syntax des MySQL-Index

Benutzerdefinierter Kalendereffekt in JavaScript

Detaillierte Erklärung der beiden Modi des Router-Routings in Vue: Hash und Verlauf

So konfigurieren Sie den virtuellen Nginx-Host in CentOS 7.3

Element-Beispielcode zum Implementieren dynamischer Tabellen

Artikel empfehlen

So verwenden Sie Binlog zur Datenwiederherstellung in MySQL

W3C Tutorial (11): W3C DOM Aktivitäten

So verwenden Sie den Yum-Befehl

So verwenden Sie JS zum Implementieren des Wasserfalllayouts von Webseiten

Flexibles CSS-Layout FLEX, Medienabfrage und Implementierung von mobilen Klickereignissen

Zusammenfassung der wichtigsten Wissenspunkte zur MySQL-Abfrageoptimierung

CSS-Standard: Eigenschaft „vertical-align“

MySQL-Prozesssteuerung: IF()-, IFNULL()-, NULLIF()-, ISNULL()-Funktionen

Vue realisiert die Funktion eines Bucheinkaufswagens

Erfahrungsaustausch zur Reparatur von MySQL InnoDB-Ausnahmen

Vergleich der JS-Array-Loop-Methode und der Effizienzanalyse

Wie gut wissen Sie über die Vererbung in JavaScript?

MySQL REVOKE zum Löschen von Benutzerberechtigungen

Detaillierte Erläuterung der Verwendung von Echart-Diagrammen im Front-End und Back-End des Projekts

Lösungen für MySql-Abstürze und Dienststartfehler