font-size プロパティ
font-size プロパティは、フォントの大きさを指定するプロパティです。
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値)、ブラウザの設定値による |
length | CSSの長さ |
initial | 初期値に戻す |
inherit | 親エレメントのプロパティを継承 |
備考(Remarks)
初期値(Default value) | medium |
継承(Inherited) | Yes |
CSS Animation | Yes |
Example
font-size の例です。
以下の例ではテキストの一部を全体のフォントサイズより小さくしています。改行を含まないテキストの一部は <span> タグなどを使用します。
関連 CSS プロパティ
関連するプロパティに以下があります。
font | fontに関するプロパティの一括指定 |
font-family | フォントファミリ |
font-feature-settings | OpenTypeフォントのもつ文字体裁機能を指定 |
font-kerning | フォント間の字詰め(文字間隔) |
font-size | 大きさ |
font-style | 文字のスタイル |
font-variant | スモールキャップの有無 |
font-variant-caps | スモールキャップの有無 |
font-weight | 太さ |
テキストに関するプロパティには以下があります。
プロパティ | 概要 |
---|---|
line-height | 行間 |
text-align、vertical-align | テキストの配置操作 |
background{ linear-gradient() } | マーカーでラインを引いたような装飾 |