font-size 属性はテキストのサイズを設定します。
Web デザインでは、テキスト サイズを管理できることが重要です。 ただし、フォントのサイズ変更を使用して、段落を見出しのように見せたり、見出しを段落のように見せたりすることはできません。
見出しには <h1> ～ <h6>、段落のみには <p> など、常に適切な HTML タグを使用してください。
font-size 値には、絶対サイズまたは相対サイズを指定できます。
絶対サイズ:
相対サイズ:
注: フォント サイズを指定しない場合、通常のテキスト (段落など) はデフォルトの 16 ピクセル (16 ピクセル = 1em) のサイズになります。
テキスト サイズをピクセル単位で設定すると、テキスト サイズを完全に制御できます。
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
ヒント: ピクセルを使用している場合でも、ズーム ツールを使用してページ全体のサイズを変更できます。
ユーザーが (ブラウザ メニュー内の) テキストのサイズを変更できるようにするために、多くの開発者はピクセルの代わりに em を使用しています。
W3C では em ディメンションを使用することを推奨しています。
1em は現在のフォント サイズと同じです。 ブラウザのデフォルトのテキスト サイズは 16 ピクセルです。 したがって、1em のデフォルトのサイズは 16px です。
サイズは、ピクセル/16=em という式を使用して、ピクセルから em まで計算できます。
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
上の例では、em 単位のテキスト サイズは前の例のピクセル サイズと同じです。 ただし、em 寸法を使用すると、すべてのブラウザでテキストのサイズが変更されます。
残念ながら、古いバージョンの Internet Explorer には依然として問題があります。 テキストを拡大すると本来よりも大きくなり、縮小すると小さくなります。
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
私たちのコードは現在正常に動作しています。 すべてのブラウザで同じテキスト サイズが表示され、すべてのブラウザでテキストをズームまたはサイズ変更できます。
テキスト サイズは、「ビューポートの幅」(「ビューポートの幅」) を意味する vw 単位を使用して設定できます。
この方法では、テキスト サイズがブラウザ ウィンドウのサイズに従います。ブラウザ ウィンドウのサイズを変更して、フォント サイズがどのように拡大縮小されるかを確認します。
<h1 style="font-size:10vw">Hello World</h1>
ビューポートはブラウザ ウィンドウのサイズです。 1vw = ビューポート幅の 1%。 ビューポートの幅が 50 cm の場合、1vw は 0.5 cm です。