CSSで文字サイズを設定する方法

Web デザインにおいて、テキストのサイズは非常に重要な要素の 1 つです。テキストのサイズを調整することで Web ページの可読性を向上させ、コンテンツを読みやすくすることができます。 HTMLではCSS(Cascading Style Sheets)を利用して文字サイズを設定できます。一般的な CSS テキスト サイズ設定をいくつか示します。

1.絶対単位を使用する

CSS の絶対単位には、ピクセル (px)、ポイント (pt)、インチ (in)、センチメートル (cm) などが含まれます。これらの単位を使用して、テキスト サイズを設定するときに特定のピクセル値または実際の寸法を指定できます。

たとえば、次のコードを使用して段落テキスト サイズを 16 ピクセルに設定できます:

p {
font-size: 16px;
}

この方法では、すべての段落が 16 ピクセルで表示されます。

テキスト サイズを実際のサイズに設定する場合は、インチ、センチメートルなどを使用できます。たとえば、次のコードは段落テキスト サイズを 2 インチに設定します。

p {
font-size: 2in;
}

ここで、実際のサイズ単位の設定に注意してください。が使用されます。 テキストのサイズは、画面の解像度とデバイスのサイズに影響されます。したがって、テキストのサイズはデバイスによって異なる場合があります。

2. 相対単位の使用

絶対単位に加えて、CSS は相対単位もサポートします。相対ユニットのサイズは、親要素のサイズに相対的です。一般的な相対単位には、em、rem、% などが含まれます。

1. em

em は、現在の要素のフォント サイズを基準にしてテキスト サイズを設定するための相対単位です。たとえば、次のコードは、段落のフォント サイズを親要素のフォント サイズの 1.5 倍に設定します。

p {

font-size: 1.5em;

}

親要素のフォント サイズが 16 の場合ピクセルの場合、段落のフォント サイズは 24 ピクセル (16*1.5) になります。

2. #rem

rem は、ルート要素 (つまり、html 要素) のフォント サイズを基準にしてテキスト サイズを設定するための相対単位です。例:

html {
font-size: 16px;
}

これに基づいて、次のコードは段落のフォント サイズを段落のフォント サイズの 1.5 倍に設定します。ルート要素 ：

p {
font-size: 1.5rem;
}

ルート要素のフォントサイズが 16 ピクセルの場合、段落は 24 ピクセル (16 *1.5) になります。

em と比較すると、rem は親要素のフォント サイズに影響されず、ページ全体のルート要素を基準にして計算されるため、より便利です。

3. %

% は、親要素のサイズを基準にしてテキスト サイズを設定するための相対単位でもあります。たとえば、次のコードは、段落のフォント サイズを親要素のフォント サイズの 150% に設定します:

p {
font-size: 150%;
}

If親要素のフォント サイズが 16 ピクセルの場合、段落のフォント サイズは 24 ピクセル (16*1.5) になります。

3. キーワードを使用する

特定のサイズ単位に加えて、CSS はテキスト サイズを設定するためのいくつかのキーワードもサポートしています。一般的に使用されるキーワードには、小、中、大があります。

たとえば、次のコードは段落のテキスト サイズを中程度に設定します:

p {
font-size: medium;
}

このように、段落のテキスト サイズはブラウザのデフォルト設定に従って変更されます。

4. 概要

Web デザインにおいて、テキストのサイズは非常に重要な要素の 1 つです。 CSS を使用すると、デザイン要件に応じてさまざまなサイズのテキストを設定できます。ピクセル、実際のサイズ、em、rem、%、キーワードなどを使用して設定でき、特定の状況に応じて選択できます。

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