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 極小 - height
- 行の高さを数値と単位で指定します。省略可能です。
- family
- フォント名を以下の値の中から指定します。省略できません。
値 文字のサンプル cursive abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ fantasy abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ monospace abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ sans-serif abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ serif abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Arial abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Century abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Chicago abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Courier abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Courier New abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Helvetica abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Monaco abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Times abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Times New Roman abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Verdana abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ ＭＳ ゴシック ABCDEFGabcdefg あいう、えお。漢字 ＭＳ 明朝 ABCDEFGabcdef gあいう、えお。漢字 ＭＳ Ｐゴシック ABCDEFGabcdefg あいう、えお。漢字 ＭＳ Ｐ明朝 ABCDEFGabcdefg あいう、えお。漢字
使用例と表示サンプル
次にfontスタイルシート属性を使用したHTMLの例と表示例を示します。
<span style="font: medium serif">font: medium serif</span>
font: medium serif
<span style="font: italic medium serif">font: italic medium serif</span>
font: italic medium serif
<span style="font: small-caps medium serif">font: small-caps medium serif</span>
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>
<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>
<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: 900">900</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: 900">900</span>
Nomal Bold Bolder Lighter 100 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>
<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: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<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 2em
line-height 3em
line-height 4em
font-family
スタイルシート属性 font-family はフォント（文字の書体）の種類を指定します。font スタイルシート属性でも同様の定義が行えます。
書式
font-family: font, font, ...
属性値
- font
- フォント名を以下の値の中から指定します。属性値はカンマで区切って複数並べて記述することもできます。
値 文字のサンプル cursive abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ fantasy abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ monospace abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ sans-serif abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ serif abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Arial abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Century abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Chicago abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Courier abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Courier New abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Helvetica abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Monaco abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Times abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Times New Roman abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Verdana abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ ＭＳ ゴシック ABCDEFGabcdefg あいう、えお。漢字 ＭＳ 明朝 ABCDEFGabcdef gあいう、えお。漢字 ＭＳ Ｐゴシック ABCDEFGabcdefg あいう、えお。漢字 ＭＳ Ｐ明朝 ABCDEFGabcdefg あいう、えお。漢字
使用例
body { font-family: verdana, arial, helvetica; }