Einführung mehrerer benutzerdefinierter Schriftarten in CSS3

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

Artikel empfehlen

Linux verwendet Shell-Skripte, um historische Protokolldateien regelmäßig zu löschen

1. Dateistruktur des Tools-Verzeichnisses [root@w...

Tools zur Bildoptimierung für Webseiten und Tipps zur Verwendung

Als grundlegendes Element einer Webseite sind Bil...

Eine kurze Erläuterung des Prinzips des flachen Einstiegs und tiefen Ausstiegs von MySQL

Inhaltsverzeichnis 1. Übersicht der Seite 2. Infi...

Analyse der Ideen zur Implementierung vertikaler Tabellen auf zwei Arten im Vue-Projekt

Problembeschreibung In unseren Projekten sind hor...

CentOS verwendet expect, um Skripte und Befehle remote in Stapeln auszuführen

Manchmal müssen wir Server stapelweise bedienen, ...

Zusammenfassung zum horizontal scrollenden Website-Design

Horizontales Scrollen ist nicht in allen Situation...

Zusammenfassung gängiger SQL-Anweisungen in MySQL

1. MySQL-Exportdatei: SELECT `pe2e_user_to_compan...

So laden Sie das JAR-Paket über die Webseite auf Nexus hoch

Wie lädt man das JAR-Paket in ein privates Lager ...

Lösen Sie die Probleme, die bei der Konfiguration des maxPostSize-Attributs von Tomcat beachtet werden müssen

brauchen: In naher Zukunft werden wir die Funktio...

Vue implementiert unregelmäßige Screenshots

Inhaltsverzeichnis Bilderfassung durch SVG CSS-Te...

CSS3 realisiert Partikelanimationseffekte beim Matching von Königen

Beim Codieren werden Sie feststellen, dass viele ...

Tutorial zur Samba-Konfiguration für die Dateifreigabe im Linux-System

Inhaltsverzeichnis Deinstallieren und installiere...

So reduzieren Sie die Speicher- und CPU-Auslastung von Webseiten

<br />Einige Webseiten sehen nicht groß aus,...

30 Tipps zum Schreiben von HTML-Code

1. HTML-Tags immer schließen Im Quellcode der vor...

So legen Sie den Stil geordneter und ungeordneter Listenelemente in CSS fest

In einer ungeordneten Liste ul>li ist das Symb...