font-sizeプロパティ

値

次のような値を設定することができます。

• xx-small – x-smallより小さいサイズ。
• x-small – smallより小さいサイズ。
• small – mediumより小さいサイズ。
• medium – ブラウザの標準サイズ。
• large – mediumより大きいサイズ。
• x-large – mediumより大きいサイズ。
• xx-large – x-largeより大きいサイズ。
• smaller – 引き継いだサイズよりも1段階小さいサイズ。
• larger – 引き継いだサイズよりも1段階大きいサイズ。
• 値 + 単位 – 数値と人気の単位を組み合わせた指定方法です。単位は「px」「pt」「em」などで指定します。
• 値 + % – 引き継いだサイズに対して、%値で指定したサイズで表示します。

パターン1

数値以外の「xx-small」〜「xx-large」の範囲でサイズ指定した例です。絶対指定となるため、親要素のフォントサイズに影響されません。

CSSコード例

.sample_css1 .text1 {
	font-size: xx-small;
}
.sample_css1 .text2 {
	font-size: x-small;
}
.sample_css1 .text3 {
	font-size: small;
}
.sample_css1 .text4 {
	font-size: medium;
}
.sample_css1 .text5 {
	font-size: large;
}
.sample_css1 .text6 {
	font-size: x-large;
}
.sample_css1 .text7 {
	font-size: xx-large;
}

表示例：

パターン2

「px」で指定した例です。絶対指定となるため、親要素のフォントサイズに影響されません。

CSSコード例

.sample_css2 .text1 {
	font-weight: 10px;
}
.sample_css2 .text2 {
	font-weight: 14px;
}
.sample_css2 .text3 {
	font-weight: 20px;
}

表示例：

パターン3

「%」で指定した例です。%は親要素の値を基準にするので注意してください。
ここでは、「medium」でブラウザ標準サイズにリセットしています。

CSSコード例

.sample_css3 .text1 {
	font-size: 80%;
}
.sample_css3 .text2 {
	font-size: 100%;
}
.sample_css3 .text3 {
	font-size: 140%;
}

表示例：

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。