CSS font

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

書式

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

参考文献

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