HTML 小さいフォント

今日の投稿では、HTML で小さなフォントを表示する方法を説明します。

HTML で小さいフォントを表示する

font-size CSS プロパティは、フォント サイズを決定します。 フォント サイズが変更されると、em、ex などのフォント サイズに関連する長さの単位のサイズも変更されます。

フォント サイズは、キーワードやピクセルまたは ems で表される数値を使用するなど、さまざまな方法で指定できます。 特定の Web ページの要件に応じて、適切なアプローチを選択してください。

構文：

font-size: value

font-size がサポートする 13 の値は次のとおりです。

1. font-size 属性のデフォルト値は medium で、フォント サイズは中になります。
2. font-size は、xx-small 値によって xx-small サイズに設定されます。
3. x-small 値は、テキスト サイズをさらに縮小します。
4. small 数値は、テキスト サイズを小さくします。
5. large の値は、テキスト サイズを大きくします。
6. x-large オプションを使用して、font-size を特大サイズに変更します。
7. font-size は、xx-large 値によって 2 倍の特大サイズに設定されます。
8. font-size は、親要素より小さい smaller 値に設定されます。
9. larger の数値は、親要素の上のフォント サイズを大きくします。
10. length の値は、固定の font-size をピクセル、センチメートルなどで設定します。
11. font-size は、% 値を使用して、親要素のフォント サイズのパーセンテージに設定されます。
12. initial 値は、この属性のデフォルト値を確立します。
13. Inherit 属性は、要素によってその親から 継承されます。

フォント サイズの詳細については、公式ドキュメント こちら を参照してください。

前の概念をさらに理解するために、次の例を検討してください。

<p style="font-size: medium;">Hello World!</p>
<p style="font-size: 5px;">Hello World!</p>
<p style="font-size: x-small;">Hello World!</p>
<p style="font-size: small;">Hello World!</p>
<p style="font-size: xx-small;">Hello World!</p>
<p style="font-size: xx-large;">Hello World!</p>
<p style="font-size: large;">Hello World!</p>

上記の例では、フレーズ hello world をさまざまなフォント サイズで出力します。 特定の Web ページの要件に応じて、適切なアプローチを選択してください。