フォントに関するスタイルシート属性

HTMLの文字フォント(書体)を指定するには、CSSプロパティ「font」を使います。

font

fontスタイルシート属性は、フォントに関する次のスタイルを一度に指定します。

書式

font: style variant weight size height family;

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

属性値

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 極小
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.Z
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.Z
Roboto The quick brown fox jumps over the lazy dog.Z
MS ゴシック The quick brown fox jumps over the lazy dog. 色は匂へど、散りぬるを。
MS 明朝 The quick brown fox jumps over the lazy dog. 色は匂へど、散りぬるを。
MS Pゴシック The quick brown fox jumps over the lazy dog. 色は匂へど、散りぬるを。
MS P明朝 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スタイルシート属性を使用したHTMLの例と表示例を示します。

<p style="font: medium serif">font: medium serif</p>

font: medium serif

<p style="font: italic medium serif">font: italic medium serif</p>

font: italic medium serif

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

font: small-caps medium serif

<p style="font: bold medium serif">font: bold medium serif</p>

font: bold medium serif

font-style

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

書式

font-style: style

属性値

style
フォントのスタイルを指定します。
意味
normal 通常(規定値)
italic イタリック
oblique 斜体
inherit 上位のスタイルを継承

使用例と表示サンプル

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

<span style="font-style: normal">Normal</span>
<span style="font-style: italic">Italic</span>
<span style="font-style: oblique">Oblique</span>

Normal Italic Oblique

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>

Nomal Bold Bolder Lighter 100 200 300 400 500 600 700 800 900

font-size

フォントのサイズを指定します。sizeにはフォントのサイズを指定します。フォントのサイズは以下の表の中から選択するか、1emのように単位で指定します。 fontスタイルシート属性でも同様の定義が行えます。

書式

font-size: size

属性値

size
フォントの大きさを指定します。
意味
xx-large 極大
x-large 大きい
large やや大きい
larger 大きい(相対値)
medium 通常(規定値)
smaller 小さい(相対値)
small やや小さい
x-small 小さい
xx-small 極小

使用例と表示サンプル

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

<span style="font-size: xx-small">xx-small</span>
<span style="font-size: x-small">x-small</span>
<span style="font-size: small">small</span>
<span style="font-size: smaller">smaller</span>
<span style="font-size: medium">medium</span>
<span style="font-size: larger">larger</span>
<span style="font-size: large">large</span>
<span style="font-size: x-large">x-large</span>
<span style="font-size: xx-large">xx-large</span>

xx-small x-small small smaller medium larger large x-large xx-large

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>
line-height 1px
line-height 2px
line-height 4px
line-height 8px
line-height 16px
line-height 32px
line-height 64px
<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>
line-height 1em
line-height 2em
line-height 3em
line-height 4em
<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>
line-height 1rem
line-height 2rem
line-height 3rem
line-height 4rem