CSS3 で複数のカスタムフォントを導入する

今日、HTML に問題を発見しました。多くのデフォルトフォントが提供されていますが、「Bold」、「Song」、「Kai」などの中国語をサポートするフォントを除き、残りは中国語フォントを認識しません。お気に入りのフォントを使用する必要がある場合はどうすればよいのでしょうか。 CSS3 でカスタムダウンロードフォントを導入することは可能ですか?可能であれば、どのように導入すればよいでしょうか？この一連の問題に対する解決策を見てみましょう。効果を見るのが一番です。以下は、Web ページ上の 3 つのフォント「春節連句標準フォント」、「江南芸術フォント」、「毛浙東芸術フォント」の効果です。

Google Chrome:

ファイアフォックス:

上記は効果のデモンストレーションですので、ご参考までに！
次に、CSS でこれを導入する方法を見てみましょう。

まず、フォントをインポートする必要があります。このようなフォントが必要です (ユーザーには必要ありません)。フォントをダウンロードして、プロジェクトのフォントフォルダーに配置します。

フォントはオンラインまたはここからダウンロードできます。ダウンロードが完了したら、フォントを紹介します。

HTMLコード:

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="UTF-8">
		<title>フォントファイルテスト</title>
	</head>
	<本文>
		<div class="chunlian">春節連句標準フォントテスト</div>
		<div class="jiangnan">江南芸術フォントテスト</div>
		<div class="maozedong"> 毛沢東フォントテスト</div>
	</本文>
</html>

次に、CSS スタイル設定を行います。

<スタイル タイプ="text/css">
			@フォントフェイス {
				フォントファミリー:'chunlian';
				src: url(font/chunlian.ttf);
			}
			@フォントフェイス {
				フォントファミリー: 'jiangnan';
				src:url(font/jiangnan.ttf);
			}
			.chunlian{
				フォントファミリー: 'chunlian';
				フォントサイズ: 50px;
				テキストシャドウ: なし;
			}
			.江南{
				フォントファミリー: 'jiangnan';
				フォントサイズ: 40px;
			}
			@フォントフェイス {
				フォントファミリー: 'maozedong';
				src:url(font/maozedong.ttf);
			}
			.maozedong{
				フォントファミリー: 'maozedong';
				フォントサイズ: 50px;
				テキストシャドウ: なし;
			}
		</スタイル>

他のフォントを追加したい場合は、CSS に @font-face と記述するだけです。

CSS3 で複数のカスタムフォントを導入する方法についての記事はこれで終わりです。CSS3 でカスタムフォントを導入する方法についての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MySQL がデフォルト値を持つ NULL 列の使用を推奨しない理由

>>: Vue2.0は適応解像度を実装する