[再版] htmlのカスタムフォント

 

今日、HTMLに問題が見つかりました。デフォルトのフォントはたくさんありますが、「HeiTi」、「Song Ti」、「Kai Ti」などの中国語のフォントをサポートしているものを除いて、残りは中国語のフォントを認識していません。お気に入りのフォントはどうすればよいですか?CSS3でカスタムダウンロードされたフォントを導入することは可能ですか?もしそうなら、どのようにそれを導入すべきですか?この一連の問題について、効果を見るほど良いものはないと言って、解決策を見てみましょう。次は、ウェブ上の3つのフォント、「春祭りの標準フォント」、「江南芸術チューンフォント」、「マオジェドンアート」の効果です。 「フォント」の効果:

グーグルクローム:
グーグルクローム

Firefoxブラウザ:
Firefoxブラウザ

上記はエフェクト表示ですので、どなたでもご理解いただけます!
次に、CSSでそれを導入する方法を見ていきます。

まず、特定のフォントを導入する必要があります。そのようなフォントが必要です(ユーザーは必要ありません)。フォントをダウンロードして、プロジェクトのフォントフォルダーに配置します。
ここに写真の説明を挿入

フォントのダウンロードインターネットでダウンロードするか、ここからダウンロードできます。ダウンロードが完了したら、フォントを紹介します。

HTMLコード:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体文件测试</title>
	</head>
	<body>
		<div class="chunlian">春联标准字体测试</div>
		<div class="jiangnan">江南艺术调字体测试</div>
		<div class="maozedong"> 毛泽东字体测试</div>
	</body>
</html>

次に、CSSスタイルの設定があります。

		<style type="text/css">
			@font-face {
				font-family:'chunlian';
				src: url(font/chunlian.ttf);
			}
			@font-face {
				font-family: 'jiangnan';
				src:url(font/jiangnan.ttf);
			}
			.chunlian{
				font-family: 'chunlian';
				font-size: 50px;
				text-shadow: none;
			}
			.jiangnan{
				font-family: 'jiangnan';
				font-size: 40px;
			}
			@font-face {
				font-family: 'maozedong';
				src:url(font/maozedong.ttf);
			}
			.maozedong{
				font-family: 'maozedong';
				font-size: 50px;
				text-shadow: none;
			}
		</style>


他のフォントを追加する場合は、CSSで直接@ font-faceを記述してください。


---------------------
転送作成者:Mu Xiongxiong
ソース:CSDN
オリジナル:https://blog.csdn.net/qq_34137397/article/details/83307474
 

おすすめ

転載: blog.csdn.net/u013946061/article/details/108402025