CSSのフォントサイズ設定方法を詳しく解説

CSSでは、px、em、remなどの単位でフォントサイズを設定することができますが、それぞれの単位の使い方を順番に紹介していきます。

1. ピクセル単位 - px

ピクセル単位は、最も一般的に使用される単位です。サイズが固定されており、表示効果が安定しているため、フォントサイズを設定する際によく使用されます。構文は次のとおりです:

font-size:number px;

たとえば、フォント サイズを 12px に設定するコードは次のとおりです:

font-size: 12px;

2. 相対単位 - em

em は相対単位であり、通常は親要素を基準にしてフォント サイズを設定するために使用されます。ページ全体で相対単位を使用する場合、HTML フォント サイズが最初に 16px に設定されている場合、1em=16px となります。もちろん、子要素のフォント サイズを設定することで、親要素の異なるフォント サイズを実現できます。構文は次のとおりです:

font-size:number em;

たとえば、次のコードは次のとおりです。フォント サイズを 1.5em に設定します。 対象:

font-size: 1.5em;

3. 相対単位 - rem

rem は、CSS3 の新しい相対単位です。 em からは、ルート要素 (HTML 要素) に基づいています。その構文と使用法は em と似ていますが、フォント サイズがルート要素を基準にする点が異なります。たとえば、フォント サイズを 1.2rem に設定するコードは次のとおりです:

font-size: 1.2rem;

4. パーセント単位 - %

パーセント単位は次のとおりです。これも相対単位ですが、親要素またはページ全体のフォント サイズを基準とします。構文は次のとおりです:

font-size:number%;

たとえば、フォント サイズを 80% に設定するコードは次のとおりです:

font-size: 80% ;

概要

フォント サイズを設定する場合、一般的に使用される単位は px、em、rem、および % です。その中でも、固定フォントサイズと安定した表示効果を実現できるピクセル単位が最もよく使用されます。相対単位は、状況に応じて柔軟に適用できます。たとえば、em と rem を使用して親要素とルート要素に対する相対的なフォント サイズを制御したり、% を使用して親要素に応じたスケーリング効果を実現したりすることができます。またはページ全体のフォント サイズ。

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