ホームページ > 記事 > ウェブフロントエンド > HTMLフォントとは何ですか?
HTMLフォントとは何ですか?
- 藏色散人オリジナル
- 2018-12-04 14:50:1917163ブラウズ
HTML Web デザインにおいて、フォント スタイルの設定は最も基本です。 Web ページに適切なフォントを設定すると、ユーザー エクスペリエンスが向上します。次に、フォント設定は主に CSS の font-family や font-style などのフォント関連のプロパティを使用します。
一般的な HTML フォント スタイルをいくつか紹介します。
コード例:
<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
<title></title>
<style type="text/css">
h2 { color: green; }
#p1 { font-family: Times, "Times New Roman", serif; }
#p2 { font-family: Helvetica, Arial, sans-serif; }
#p3 { font-family: serif; }
#p4 { font-family: sans-serif; }
#p5 { font-family: monospace; }
#p6 { font-family: cursive; }
#p7 { font-family: fantasy; }
.s1 { font-style: italic; }
.s2 { font-style: oblique; }
.s3 { font-weight: bold; }
.s4 { font-weight: 100; }
.s5 { font-style: normal;}
</style>
</head>
<body>
<h1>字体系列</h1>
<p>与CSS一起使用。两个常见的字体组合列表和五个通用后备字体系列。</p>
一个serif字体家族列表！
<h2>font-family: Times, "Times New Roman", serif</h2>
<p id="p1">
<span class="s1">斜体字体！</span>
<span class="s2">字体样式为font-style: oblique; </span>
<span class="s3">字体样式为font-weight: bold;</span>
<span class="s4">字体样式为font-weight: 100;</span>
<span class="s5">正常字体样式！</span>
</p>
一个sans-serif字体家族列表！
<h2>font-family: Helvetica, Arial, sans-serif</h2>
<p id="p2">
<span class="s1">斜体字体！</span>
<span class="s2">字体样式为font-style: oblique; </span>
<span class="s3">字体样式为font-weight: bold;</span>
<span class="s4">字体样式为font-weight: 100;</span>
<span class="s5">正常字体样式！</span>
</p>
serif通用字体系列！
<h2>font-family: serif</h2>
<p id="p3">
<span class="s1">斜体字体！</span>
<span class="s2">字体样式为font-style: oblique; </span>
<span class="s3">字体样式为font-weight: bold;</span>
<span class="s4">字体样式为font-weight: 100;</span>
<span class="s5">正常字体样式！</span>
</p>
sans-serif通用字体系列！
<h2>font-family: sans-serif</h2>
<p id="p4">
<span class="s1">斜体字体！</span>
<span class="s2">字体样式为font-style: oblique; </span>
<span class="s3">字体样式为font-weight: bold;</span>
<span class="s4">字体样式为font-weight: 100;</span>
<span class="s5">正常字体样式！</span>
</p>
等宽通用字体系列！
<h2>font-family: monospace</h2>
<p id="p5">
<span class="s1">斜体字体!</span>
<span class="s2">字体样式为font-style: oblique; </span>
<span class="s3">字体样式为font-weight: bold;</span>
<span class="s4">字体样式为font-weight: 100;</span>
<span class="s5">正常字体样式！</span>
</p>
草书字体家族！
<h2>font-family: cursive</h2>
<p id="p6">
<span class="s1">斜体字体！</span>
<span class="s2">字体样式为font-style: oblique; </span>
<span class="s3">字体样式为font-weight: bold;</span>
<span class="s4">字体样式为font-weight: 100;</span>
<span class="s5">正常字体样式！</span>
</p>
幻想通用字体系列！
<h2>font-family: fantasy</h2>
<p id="p7">
<span class="s1">斜体字体！</span>
<span class="s2">字体样式为font-style: oblique; </span>
<span class="s3">字体样式为font-weight: bold;</span>
<span class="s4">字体样式为It sucks in with a 100 font-weight!</span>
<span class="s5">正常字体样式！</span>
</p>
</body>
</html>フロントデスクの効果は次のとおりです:
font-family 要素のフォント ファミリを指定します。 font-family は、複数のフォント名を「フォールバック」システムとして保存できます。ブラウザが最初のフォントをサポートしていない場合は、次のフォントが試行されます。つまり、font-family 属性の値は、要素に使用するフォント ファミリ名またはクラス ファミリ名の優先リストです。ブラウザは認識した最初の値を使用します。
フォント ファミリ名には 2 種類があります。
指定されたシリーズ名: 「times」、「courier」、「arial」などの特定のフォントの名前。
通常のフォント ファミリ名: 例: "serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
ヒント: 各値はカンマで区切ります。最後の手段として必ず姓を入力してください。
注: 特定のフォント ファミリ (Geneva) の使用は、そのフォント ファミリがユーザーのマシンで利用できるかどうかに完全に依存します。この属性はフォントのダウンロードを示すものではありません。したがって、フォールバックとして一般的なフォント ファミリ名を使用することを強くお勧めします。
font-style 属性フォントのスタイルを定義します。このプロパティは、斜体、斜体、または通常のフォントの使用を設定します。イタリック体フォントは通常、フォント ファミリ内の個別のフォントとして定義されます。理論的には、ユーザー エージェントは通常のフォントに基づいて斜体フォントを計算できます。
この記事は HTML フォントとは何かを紹介するもので、困っている友人のお役に立てれば幸いです。
以上がHTMLフォントとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。