備忘録的プログラミングリファレンス

font-size プロパティ

 font-size プロパティは、フォントの大きさを指定するプロパティです。

文字の大きさを16pxに指定
font-size: 16px;

 medium、xx-small、x-small、small、large、x-large、xx-large、smaller、largerはmediumを基準にした相対的な大きさの設定値と、現在値(親エレメント)の設定値からの相対値です。イメージとしては、

xx-small < x-small < small < medium ( default ) < large < x-large < xx-large
smaller < 現在の設定値 < larger
です。

 Google Search Console の評価で読み易さがあります。文字の大きさもそうですが行間も適切にする必要があります。
 文字の大きさが小さいほど行間は大きくした方がよいようです。
 Google Search Console からエラーにならない文字の大きさは 16px 以上、line-height プロパティが 1.6 以上でした。表示される画面の大きさにもよりますので、一概にはいえません。
 このサイトでは font-size が 16px line-height 2 以上にしています。

ページ内 Index

構文(Syntax)

CSS

font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit ;

DOM ( JavaScript )

値の取得
String = object.style.fontSize;
値の設定
object.style.fontSize=" medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit ";

値(Values)

Value摘要
medium初期値(default値)、ブラウザの設定値による
lengthCSSの長さ
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)medium
継承(Inherited)Yes
CSS AnimationYes

Example

 font-size の例です。

 以下の例ではテキストの一部を全体のフォントサイズより小さくしています。改行を含まないテキストの一部は <span> タグなどを使用します。