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: 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>

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
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の使用例と表示サンプル

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

<p style="font-family: monospace, serif;">The quick brown fox jumps over the lazy dog.</p>

The quick brown fox jumps over the lazy dog.

<p style="font-family: serif, monospace;">The quick brown fox jumps over the lazy dog.</p>

The quick brown fox jumps over the lazy dog.

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

<p style="font-family: not-exist-font, monospace;">The quick brown fox jumps over the lazy dog.</p>

The quick brown fox jumps over the lazy dog.

フォント

<p style="font-family: Arial; font-size: large">Arial</p>
<p style="font-family: 'Arial Black'; font-size: large">Arial Black</p>
<p style="font-family: 'Courier New'; font-size: large">Courier New</p>
<p style="font-family: Georgia; font-size: large">Georgia</p>
<p style="font-family: Impact; font-size: large">Impact</p>
<p style="font-family: 'Times New Roman'; font-size: large">Times New Roman</p>
<p style="font-family: Verdana; font-size: large">Verdana</p>

Arial

Arial Black

Courier New

Georgia

Impact

Times New Roman

Verdana

総称ファミリ

<p style="font-family: serif; font-size: large">serif 色は匂へど、散りぬるを。</p>
<p style="font-family: sans-serif; font-size: large">sans-serif 色は匂へど、散りぬるを。</p>
<p style="font-family: monospace; font-size: large">monospace 色は匂へど、散りぬるを。</p>
<p style="font-family: fantasy; font-size: large">fantasy 色は匂へど、散りぬるを。</p>
<p style="font-family: cursive; font-size: large">cursive 色は匂へど、散りぬるを。</p>

serif 色は匂へど、散りぬるを。

sans-serif 色は匂へど、散りぬるを。

monospace 色は匂へど、散りぬるを。

fantasy 色は匂へど、散りぬるを。

cursive 色は匂へど、散りぬるを。

Microsoft Windows

<p style="font-family: 'MS 明朝'; font-size: large">Microsoft 明朝</p>
<p style="font-family: 'MS P明朝'; font-size: large">Microsoft プロポーショナル明朝</p>
<p style="font-family: 'MS ゴシック'; font-size: large">Microsoft ゴシック</p>
<p style="font-family: 'MS Pゴシック'; font-size: large">Microsoft プロポーショナルゴシック</p>

Microsoft 明朝

Microsoft プロポーショナル明朝

Microsoft ゴシック

Microsoft プロポーショナルゴシック

Android

<p style="font-family: Roboto;">Android Roboto</p>

Android Roboto

SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送