CSS font property

HTMLの文字フォント（書体）を指定するには、CSSプロパティ「font」を使います。fontスタイルシート属性は、フォントに関する次のスタイルを一度に指定します。

• font-style
• font-variant
• font-weight
• line-height

書式

font: style variant weight size height family;

属性値のうち、style、variant、weight、heightは省略可能です。 また、 style、variant、weightの順序はどのような順序でも構いません。

属性値

style

フォントのスタイルを指定します。省略可能です。

値	意味
normal	通常（規定値）
italic	イタリック
oblique	斜体
inherit	上位のスタイルを継承

variant

アルファベットを大文字で表示するか否かをを指定します。省略可能です。

値	意味
normal	通常（規定値）
small-caps	大文字
inherit	上位のスタイルを継承

weight

文字をを太文字で表示するか否かをを指定します。省略可能です。

値	意味
normal	通常（規定値）
bold	太文字
bolder	太文字
lighter	細文字

size

フォントの大きさを指定します。省略できません。

値	意味
xx-large	極大
x-large	大きい
large	やや大きい
larger	大きい（相対値）
medium	通常（規定値）
smaller	小さい（相対値）
small	やや小さい
x-small	小さい
xx-small	極小

フォントのサイズは font-size プロパティで指定することもできる。

height

行の高さを数値と単位で指定します。省略可能です。

family

フォント名を以下の値の中から指定します。省略できません。フォント名に空白文字が含まれる場合は、2重引用符(")又は単一引用符(')でフォント名を括ります。

font-family	文字のサンプル
cursive	The quick brown fox jumps over the lazy dog.
fantasy	The quick brown fox jumps over the lazy dog.
monospace	The quick brown fox jumps over the lazy dog.
sans-serif	The quick brown fox jumps over the lazy dog.
serif	The quick brown fox jumps over the lazy dog.
Arial	The quick brown fox jumps over the lazy dog.
Century	The quick brown fox jumps over the lazy dog.
Chicago	The quick brown fox jumps over the lazy dog.
Courier	The quick brown fox jumps over the lazy dog.
Courier New	The quick brown fox jumps over the lazy dog.
Helvetica	The quick brown fox jumps over the lazy dog.
Monaco	The quick brown fox jumps over the lazy dog.
Times	The quick brown fox jumps over the lazy dog.
Times New Roman	The quick brown fox jumps over the lazy dog.
Verdana	The quick brown fox jumps over the lazy dog.
Roboto	The quick brown fox jumps over the lazy dog.
ＭＳ ゴシック	The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。
ＭＳ 明朝	The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。
ＭＳ Ｐゴシック	The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。
ＭＳ Ｐ明朝	The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。
Meiryo	The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。
Meiryo UI	The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。
游ゴシック	The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。
游明朝	The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。

フォントファミリは font-family プロパティで指定することもできる。

使用例と表示サンプル

次にfontスタイルシート属性を使用したHTMLの例と表示例を示します。

<p style="font: xx-large serif">xx-large serif</p>
<p style="font: x-large serif">x-large serif</p>
<p style="font: large serif">large serif</p>
<p style="font: medium serif">medium serif</p>
<p style="font: small serif">small serif</p>
<p style="font: x-small serif">x-small serif</p>
<p style="font: xx-small serif">xx-small serif</p>

xx-large serif

x-large serif

large serif

medium serif

small serif

x-small serif

xx-small serif

<p style="font: medium serif">medium serif</p>
<p style="font: medium sans-serif">medium sans-serif</p>
<p style="font: medium monospace">medium monospace</p>
<p style="font: medium fantasy">medium fantasy</p>
<p style="font: medium cursive">medium cursive</p>

medium serif

medium sans-serif

medium monospace

medium fantasy

medium cursive

<p style="font: italic medium serif">italic medium serif</p>
<p style="font: small-caps medium serif">small-caps medium serif</p>
<p style="font: bold medium serif">bold medium serif</p>

italic medium serif

small-caps medium serif

bold medium serif

font-style

フォントのスタイルを指定します。font スタイルシート属性でも同様の定義が行えます。

書式

font-style: style

属性値

style

フォントのスタイルを指定します。

値	意味
normal	通常（規定値）
italic	イタリック
oblique	斜体
inherit	上位のスタイルを継承

normal

font-style に normal を指定すると、フォントが標準体になる。

<p style="font-style: normal">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

italic

font-style に italic を指定すると、フォントがイタリック体になる。日本語のフォントにはイタリック体が無いことがある。

<p style="font-style: italic">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

oblique

font-style に oblique を指定すると、フォントが斜体になる。イタリックとは異なり、フォントを斜めに傾けて表示するため、日本語のフォントでも利用できる。

<p style="font-style: oblique">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

font-variant

font-variantスタイルシート属性は、アルファベットを大文字で表示するか否かをを指定します。 大文字で表示するよう指定した場合、HTML文書のソースで小文字で書かれたアルファベットも、ブラウザ上では大文字で表示されます。 font スタイルシート属性でも同様の定義を行うことができます。

書式

font-variant: variant

属性値

variant

アルファベットを大文字で表示するか否かをを指定します。

値	意味
normal	通常（規定値）
small-caps	大文字
inherit	上位のスタイルを継承

使用例と表示サンプル

次に、スタイルシート属性 font-variant を使用したHTMLの例を示します。

<span style="font-variant: normal">normal</span>
<span style="font-variant: small-caps">small-caps</span>

normal small-caps

font-weight

font-weightスタイルシート属性は、アルファベットを太文字で表示するか否かをを指定します。fontスタイルシート属性でも同様の定義を行うことができます。

書式

font-weight: weight

属性値

weight

文字をを太文字で表示するか否かをを指定します。100～900の数値で指定するか、以下の文字列を指定します。

weight属性

値	意味
normal	通常（規定値）
bold	太文字
bolder	太文字
lighter	細文字

使用例と表示サンプル

次に、スタイルシート属性 font-weight を使用したHTMLの例を示します。

<span style="font-weight: normal">normal</span>
<span style="font-weight: bold">bold</span>
<span style="font-weight: bolder">bolder</span>
<span style="font-weight: lighter">lighter</span>
<span style="font-weight: 100">100</span>
<span style="font-weight: 200">200</span>
<span style="font-weight: 300">300</span>
<span style="font-weight: 400">400</span>
<span style="font-weight: 500">500</span>
<span style="font-weight: 600">600</span>
<span style="font-weight: 700">700</span>
<span style="font-weight: 800">800</span>
<span style="font-weight: 900">900</span>

normal bold bolder lighter 100 200 300 400 500 600 700 800 900

<p style="font-family: serif; font-size: xx-large">
  <span style="font-weight: normal">normal</span>
  <span style="font-weight: bold">bold</span>
  <span style="font-weight: bolder">bolder</span>
  <span style="font-weight: lighter">lighter</span>
  <span style="font-weight: 100">100</span>
  <span style="font-weight: 200">200</span>
  <span style="font-weight: 300">300</span>
  <span style="font-weight: 400">400</span>
  <span style="font-weight: 500">500</span>
  <span style="font-weight: 600">600</span>
  <span style="font-weight: 700">700</span>
  <span style="font-weight: 800">800</span>
  <span style="font-weight: 900">900</span>
</p>

normal bold bolder lighter 100 200 300 400 500 600 700 800 900

line-height

行の高さを指定します。font スタイルシート属性でも同様の定義が行えます。

書式

line-height: height

属性値

height

行の高さを数値と単位で指定します。

使用例と表示サンプル

<span style="line-height:1px;">line-height 1px</span><br>
<span style="line-height:2px;">line-height 2px</span><br>
<span style="line-height:4px;">line-height 4px</span><br>
<span style="line-height:8px;">line-height 8px</span><br>
<span style="line-height:16px;">line-height 16px</span><br>
<span style="line-height:32px;">line-height 32px</span><br>
<span style="line-height:64px;">line-height 64px</span><br>

<span style="line-height:1em;">line-height 1em</span><br>
<span style="line-height:2em;">line-height 2em</span><br>
<span style="line-height:3em;">line-height 3em</span><br>
<span style="line-height:4em;">line-height 4em</span><br>

<span style="line-height:1rem;">line-height 1rem</span><br>
<span style="line-height:2rem;">line-height 2rem</span><br>
<span style="line-height:3rem;">line-height 3rem</span><br>
<span style="line-height:4rem;">line-height 4rem</span><br>

参考文献

World Wide Web Consortium (2018) CSS Fonts Module Level 3