HTMLでフォントサイズを設定する方法

HTML コードを記述する場合、適切なフォント サイズを使用すると、ページがより快適で読みやすく、プロフェッショナルに見えるようになります。この記事では、HTMLでフォントサイズを設定する方法を説明します。

HTML には 7 つの異なる相対サイズのキーワードがあります。つまり、xx-small、x-small、small、medium、large、x-large、xx-large です。相対サイズは、現在の要素の親要素のサイズを基準にして決定されます。一般に、中サイズはデフォルトのベースライン サイズで、16 px (ピクセル) に相当します。他のキーワードは、このベースライン サイズに基づいて計算されます。

さらに、絶対サイズを使用してフォント サイズを設定することもできます。これらのサイズは、長さの絶対単位 (ピクセルやポイントなど)、または画面のパーセンテージに対する相対値のいずれかです。絶対サイズの利点は、フォント サイズを正確に制御できることですが、欠点は、さまざまな画面サイズのニーズに適応できないことです。

フォント サイズを設定する方法は次のとおりです:

1. HTML での相対サイズの使用

相対サイズ キーワードを使用すると、フォント サイズを設定できます。親のサイズに基づいて要素のサイズが調整され、適応性が向上します。サンプル コードは次のとおりです。

<!-- 使用 small 大小的关键字 -->
<p style="font-size: small;">This text is smaller than usual.</p>

<!-- 使用 large 大小的关键字 -->
<p style="font-size: large;">This text is larger than usual.</p>

<!-- 使用 x-large 大小的关键字 -->
<p style="font-size: x-large;">This text is even larger than before.</p>

2. HTML での絶対サイズの使用

絶対サイズを使用すると、フォント サイズを正確に制御できます。以下はサンプル コードです。

<!-- 使用像素作为绝对大小 -->
<p style="font-size: 20px;">This text is 20 pixels in size.</p>

<!-- 使用点作为绝对大小 -->
<p style="font-size: 14pt;">This text is 14 points in size.</p>

<!-- 使用百分比作为相对屏幕大小 -->
<p style="font-size: 200%;">This text is twice as big as normal.</p>

3. CSS でのフォント サイズの使用

style 属性を直接使用して HTML でフォント サイズを設定できますが、次のこともできます。 CSS スタイル シートを通じて設定します。例:

/* 在样式表中设置字体大小为 16 像素 */
p {
  font-size: 16px;
}

この方法を使用すると、スタイル シートで複数のフォント サイズを設定して、さまざまなページ レイアウトに適切に適応できます。

概要

HTML フォント サイズの設定は非常に簡単な操作で、CSS の font-size プロパティを使用するだけで設定できます。ただし、ページをより快適で読みやすくするには、適切な相対サイズまたは絶対サイズを選択する必要があることに注意してください。同時に、さまざまなデバイスにうまく適応できるように、画面サイズに応じて対応するフォント サイズを選択する必要もあります。

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