HTML - CSS - font-* フォント指定 - font-size フォントサイズ

1.　概要

2.　実験

3.　font との比較

1.　概要

　フォントサイズは、font-size」で指定します。
　指定の仕方は、サイズをきっちり指定する方法や、「small」、「large」などのキーワードで指定する方法があります。


/* <absolute-size> 値 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

/* <relative-size> 値 */
font-size: larger;
font-size: smaller;

/* <length> 値 */
font-size: 12px;
font-size: 0.8em;

/* <percentage> 値 */
font-size: 80%;

/* グローバル値 */
font-size: inherit;
font-size: initial;
font-size: unset;


　なのだそうであります。

2.　実験

　で、small、large などの値を実験してみます。

　font-size: xx-small;　日本語で書くとこう。

　font-size: x-small;　日本語で書くとこう。

　font-size: small;　日本語で書くとこう。

　font-size: medium;　日本語で書くとこう。
　わたしの感覚では、「medium」が以外に大きいんですよね。

　font-size: large;　日本語で書くとこう。

　font-size: x-large;　日本語で書くとこう。

　font-size: xx-large;　日本語で書くとこう。

3.　font との比較

　さて、「HTML5」では、無効になってしまいましたが、「HTML4」では


<font size="サイズ">


　という書き方がありました。
　今（2022年9月9日）でも、多くのブラウザでは機能しているようです。
　少なくとも、「Vivaldi 5.4.2753.47」では、機能しています。

　最近まで、旧式で書いていたコンテンツがあって、「<font size="">」から、「font-size:」へ切り替えるのに少々手間取りました。
　比較を書いておきます。
　ブラウザによって、見え方が違うし、そのうち以下の表示が意味をなさないことになってしまいそうですが・・・。
　でまぁ、以下のように記述しますと


<font size="3">サイズ３の文字</font> <span style="font-size: 1em;">サイズ 1em の文字</span> <span style="font-size: midium;">サイズ midium の文字</span>
<font size="6">サイズ６の文字</font> <span style="font-size: 2.3em;">サイズ 2.3em の文字</span> <span style="font-size: xx-large;">サイズ xx-large の文字</span>


　下記のように表示されます。

　サイズ３の文字 サイズ 1em の文字 サイズ midium の文字
　サイズ６の文字 サイズ 2.3em の文字 サイズ xx-large の文字

　これ、「Vivaldi 5.4.2753.47」では横一列の文字の大きさは同じに見えます。