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 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
MS ゴシック ABCDEFGabcdefg あいう、えお。漢字
MS 明朝 ABCDEFGabcdef gあいう、えお。漢字
MS Pゴシック ABCDEFGabcdefg あいう、えお。漢字
MS P明朝 ABCDEFGabcdefg あいう、えお。漢字
Meiryo ABCDEFGabcdefg あいう、えお。漢字
Meiryo UI ABCDEFGabcdefg あいう、えお。漢字
游ゴシック ABCDEFGabcdefg あいう、えお。漢字
游明朝 ABCDEFGabcdefg あいう、えお。漢字

対応状況

Webブラウザ 対応状況
Internet Explorer 6.0
FireFox 3.0
Google Chrome 0.3
Opera 9.62
Safari 3.2.1

使用例と表示サンプル

次に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 上位のスタイルを継承

対応状況

Webブラウザ 対応状況
Internet Explorer 6.0
FireFox 3.0
Google Chrome 0.3
Opera 9.62
Safari 3.2.1

使用例と表示サンプル

次にスタイルシート属性 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 上位のスタイルを継承

対応状況

Webブラウザ 対応状況
Internet Explorer 6.0
FireFox 3.0
Google Chrome 0.3
Opera 9.62
Safari 3.2.1

使用例と表示サンプル

次に、スタイルシート属性 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 細文字

対応状況

Webブラウザ 対応状況
Internet Explorer 6.0
FireFox 3.0
Google Chrome 0.3
Opera 9.62
Safari 3.2.1

使用例と表示サンプル

次に、スタイルシート属性 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>

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 極小

対応状況

Webブラウザ 対応状況
Internet Explorer 6.0
FireFox 3.0
Google Chrome 0.3
Opera 9.62
Safari 3.2.1

使用例と表示サンプル

次にスタイルシート属性 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
行の高さを数値と単位で指定します。

対応状況

Webブラウザ 対応状況
Internet Explorer 6.0
FireFox 3.0
Google Chrome 0.3
Opera 9.62
Safari 3.2.1

使用例と表示サンプル

<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

font-family

スタイルシート属性 font-family はフォント(文字の書体)の種類を指定します。font スタイルシート属性でも同様の定義が行えます。

書式

font-family: font [,font ...]

属性値

font
フォント名または総称ファミリ名を指定する。属性値はカンマで区切って複数並べて記述することもできる。複数指定した場合、左側の方が優先順位が高い。

総称ファミリはブラウザ環境に依存しない抽象的なフォント名である。総称ファミリの一覧を次の表に示す。

総称ファミリ (generic-family)
総称ファミリ名 説明
serif セリフ(ひげ飾りつき文字)。日本語の明朝体に相当。
sans-serif サンセリフ(ひげ飾りなしの文字)。日本語のゴシック体に相当。
monospace 等幅文字
fantasy 装飾文字
cursive 筆記体。日本語の草書体に相当。

総称ファミリは何らかのフォントに割り当てられているが、具体的にどのフォントに割り当てられているかはブラウザ環境によって異なる。

具体的なフォント名を指定する場合、ブラウザ環境によっては指定されたフォントが使用できない可能性があるため、属性値リストの中に総称ファミリ名を含めておくことが望ましい。

属性値リストに指定されたフォントがすべて使用できない場合、デフォルトのフォントで表示される。

フォント名に空白文字(スペース)が含まれる場合、フォント名を2重引用符(")または単引用符(')で括る。

使用例

font-family: serifの使用例を次に示す。

<p style="font-family: serif; font-size: large">abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 あいうえお、アイウエオ,漢字。</p>

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 あいうえお、アイウエオ,漢字。

font-family: sans-serifの使用例を次に示す。

<p style="font-family: sans-serif; font-size: large">abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 あいうえお、アイウエオ,漢字。</p>

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 あいうえお、アイウエオ,漢字。

font-family: monospaceの使用例を次に示す。

<p style="font-family: monospace; font-size: large">abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 あいうえお、アイウエオ,漢字。</p>

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 あいうえお、アイウエオ,漢字。

font-family: fantasyの使用例を次に示す。

<p style="font-family: fantasy; font-size: large">abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 あいうえお、アイウエオ,漢字。</p>

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 あいうえお、アイウエオ,漢字。

font-family: cursiveの使用例を次に示す。

<p style="font-family: cursive; font-size: large">abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 あいうえお、アイウエオ,漢字。</p>

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 あいうえお、アイウエオ,漢字。

font-family: Arialの使用例を次に示す。

<p style="font-family: Arial; font-size: large">abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ

font-family: 'Arial Black'の使用例を次に示す。

<p style="font-family: 'Arial Black'; font-size: large">abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ

font-family: 'Courier New'の使用例を次に示す。

<p style="font-family: 'Courier New'; font-size: large">abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ

font-family: Georgiaの使用例を次に示す。

<p style="font-family: Georgia; font-size: large">abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ

font-family: Impactの使用例を次に示す。

<p style="font-family: Impact; font-size: large">abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ

font-family: 'Times New Roman'の使用例を次に示す。

<p style="font-family: 'Times New Roman'; font-size: large">abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ

font-family: Verdanaの使用例を次に示す。

<p style="font-family: Verdana; font-size: large">abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ

font-family: 'MS 明朝'の使用例を次に示す。

<p style="font-family: 'MS 明朝'; font-size: large">ABCDEFGabcdefg あいう、えお。漢字</p>

ABCDEFGabcdefg あいう、えお。漢字

font-family: 'MS P明朝'の使用例を次に示す。

<p style="font-family: 'MS P明朝'; font-size: large">ABCDEFGabcdefg あいう、えお。漢字</p>

ABCDEFGabcdefg あいう、えお。漢字

font-family: 'MS ゴシック'の使用例を次に示す。

<p style="font-family: 'MS ゴシック'; font-size: large">ABCDEFGabcdefg あいう、えお。漢字</p>

ABCDEFGabcdefg あいう、えお。漢字

font-family: 'MS Pゴシック'の使用例を次に示す。

<p style="font-family: 'MS Pゴシック'; font-size: large">ABCDEFGabcdefg あいう、えお。漢字</p>

ABCDEFGabcdefg あいう、えお。漢字

複数の属性値を指定した場合、左側の値が優先される。

<p style="font-family: monospace, serif">ABCabc</p>

ABCabc

<p style="font-family: serif, monospace">ABCabc</p>

ABCabc

ブラウザ環境で対応していないフォント名が指定された場合、優先順位に従って対応するフォントを決定する。

<p style="font-family: not-exist-font, monospace">ABCabc</p>

ABCabc