HTMLフォントとは何ですか?-htmlチュートリアル-php.cn

HTMLフォントとは何ですか?

藏色散人

リリース： 2018-12-04 14:50:19

オリジナル

17281 人が閲覧しました

HTML Web デザインにおいて、フォントスタイルの設定は最も基本です。 Web ページに適切なフォントを設定すると、ユーザーエクスペリエンスが向上します。次に、フォント設定は主に CSS の font-family や font-style などのフォント関連のプロパティを使用します。

HTMLフォントとは何ですか?

一般的な 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>

ログイン後にコピー

フロントデスクの効果は次のとおりです:

HTMLフォントとは何ですか?

font-family 要素のフォントファミリを指定します。 font-family は、複数のフォント名を「フォールバック」システムとして保存できます。ブラウザが最初のフォントをサポートしていない場合は、次のフォントが試行されます。つまり、font-family 属性の値は、要素に使用するフォントファミリ名またはクラスファミリ名の優先リストです。ブラウザは認識した最初の値を使用します。

フォントファミリ名には 2 種類があります。

指定されたシリーズ名: 「times」、「courier」、「arial」などの特定のフォントの名前。

通常のフォントファミリ名: 例: "serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"

ヒント: 各値はカンマで区切ります。最後の手段として必ず姓を入力してください。

注: 特定のフォントファミリ (Geneva) の使用は、そのフォントファミリがユーザーのマシンで利用できるかどうかに完全に依存します。この属性はフォントのダウンロードを示すものではありません。したがって、フォールバックとして一般的なフォントファミリ名を使用することを強くお勧めします。

font-style 属性フォントのスタイルを定義します。このプロパティは、斜体、斜体、または通常のフォントの使用を設定します。イタリック体フォントは通常、フォントファミリ内の個別のフォントとして定義されます。理論的には、ユーザーエージェントは通常のフォントに基づいて斜体フォントを計算できます。

この記事は HTML フォントとは何かを紹介するもので、困っている友人のお役に立てれば幸いです。

以上がHTMLフォントとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。