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

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は適応解像度を実装する

推薦する

WeChatアプレットに2048ミニゲームを実装する詳細なプロセス

レンダリング サンプルコード今日は、WeChat アプレットを使用して 2048 ゲームを実装します...

Centos7 サーバーで jar パッケージ プロジェクトを開始する最良の方法

序文Linux 上で jar パッケージを実行する方法は誰もが知っています。なぜ別々に話したいのでし...

MySQL データベースのインデックスとトランザクション

目次1. 索引1.1 コンセプト1.2 機能1.3 索引作成の原則1.3.1 ディスクアクセス回数を...

CentOS6.9 での MySQL 5.7.17 のインストールと設定のチュートリアル

CentOS6.9はMysql5.7をインストールします。参考までに、詳細は次のとおりです。 1. ...

MySQL マスタースレーブレプリケーションの読み書き分離構造の詳細な説明

MySQL マスタースレーブ設定MySQL のマスター/スレーブ レプリケーションと読み取り/書き込...

行間隔が広い場合の解決策(IE では 5 ピクセル多い)

コードをコピーコードは次のとおりです。 li {幅:300px; 高さ:23px; 行の高さ:24p...

jQueryのチェーンプログラミングスタイルの詳細な例

チェーンプログラミングの実装原理jQuery を使用すると、開発者は常にドット構文を使用して独自のメ...

seata docker 高可用性デプロイメントの詳細な紹介

バージョン1.4.2公式ドキュメントドッカーハブ起動する環境変数SEATA_CONFIG_NAMEを...

HTML で入力ボックスに純粋な数字のみを入力するように制限する方法

inputボックスを純粋な数字のみに制限する1、onkeyup = "value=valu...

ルート変更を監視するJavaScriptの詳細な説明

目次歴史pushState() メソッドpushState() の使用シナリオreplaceStat...

Vueで配列の変更を監視する方法

目次序文ソースコード学習の第一歩はどこから始めればよいでしょうか?写真から始めましょうソースコードを...

Windows で複数の MySQL インスタンスを実行する方法

序文Windows では、各インスタンスに適切なパラメータを使用してコマンド ラインから複数の My...

preタグを自動的に折り返すためのサンプルコード

pre 要素は、フォーマット済みのテキストを定義します。 pre 要素で囲まれたテキストでは、通常、...

CSS3 を使用した背景ぼかし効果の 3 つの例

導入から始めず、いきなり本題に入りましょう。通常の背景ぼかし効果は次のとおりです。 プロパティを使用...

MySql バッチに挿入するときにデータの重複を避ける方法

目次序文1. ignore を挿入2. 重複キーの更新時3. を置き換える要約する序文Mysql は...