このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

font-family”プロパティ:文字のフォント

記事Dec. 6th,2020
文字のフォントを指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 ユーザー・エージェントに依る
適用対象 すべての要素
継承 Yes
パーセント値 パーセント値は指定できません
計算値 <generic-family>”値と“<family-name>”値をアイテムとするリスト
アニメーション 離散

font-family”プロパティは優先順位付けされたフォント名やフォントの総称名のリストを定義します。テキストを表示するのに使用するフォントを指定することができます。

font-family”プロパティで指定されたフォントが実際に使用されるかは完全にユーザーの閲覧環境に依ります。ユーザーのデバイスにインストールされていないフォントは表示されず、他のフォントが使用されます。

サンプルコード

p { font-family: "游明朝","ヒラギノ明朝",serif;}

説明
<generic-family>”値
serif セリフ体 (形式ばった、ストロークの端に飾りや払いがある字形。日本語では明朝体のこと。一般に文字ごとに幅が異なるプロポーショナルフォントです。必ず一つ以上のフォントと結び付けられますが、すべての文字が含まれるとは限らないため一部で異なるフォントが使用される場合があります。)
sans-serif サンセリフ体 (太さがほぼ一定でストロークの端に飾りや払いがない字形。日本語ではゴシック体のこと。一般に文字ごとに幅が異なるプロポーショナルフォントです。必ず一つ以上のフォントと結び付けられますが、すべての文字が含まれるとは限らないため一部で異なるフォントが使用される場合があります。)
cursive 形式ばっていない、ペンやブラシで書かれた手書きのような字形 (行書体など。)
fantasy 装飾的、表現的な字形 (パイフォントや絵文字などの実際の文字を表さない字形は含まれません。)
monospace 等幅フォント (すべての文字が同じ幅を持つ字形。プログラムのコードなどを表現するために使用されます。必ず一つ以上のフォントと結び付けられますが、すべての文字が含まれるとは限らないため一部で異なるフォントが使用される場合があります。)
system-uiCSS Fonts Module Level 4 で追加 ユーザー・エージェントが動作しているプラットフォームの既定のフォント (OSの標準システムフォント。同じブラウザでも異なるOSのデバイスでは異なるフォントが使用されます。ウェブコンテンツとデバイスのOSのインターフェースに統一感を出すために使用できます。)
emojiCSS Fonts Module Level 4 で追加 絵文字フォント
mathCSS Fonts Module Level 4 で追加 数学的表現のための字形 (数式を表現するための引き延ばし可能な記号などを含みます。)
fangsongCSS Fonts Module Level 4 で追加 中国語の仿宋体 (宋体と楷書体の中間の書体でやや斜めになった払いの表現が小さめの書体です。中国の行政文書でよく使用されます。)
ui-serifCSS Fonts Module Level 4 で追加 システムのユーザー・インターフェースに使用される既定のセリフ体フォント (ウェブコンテンツとデバイスのOSのインターフェースに統一感を出すために使用できます。適したシステムフォントがない場合はどのフォントにも結び付けられません。)
ui-sans-serifCSS Fonts Module Level 4 で追加 システムのユーザー・インターフェースに使用される既定のサンセリフ体フォント (ウェブコンテンツとデバイスのOSのインターフェースに統一感を出すために使用できます。適したシステムフォントがない場合はどのフォントにも結び付けられません。)
ui-monospaceCSS Fonts Module Level 4 で追加 システムのユーザー・インターフェースに使用される既定の等幅フォント (ウェブコンテンツとデバイスのOSのインターフェースに統一感を出すために使用できます。適したシステムフォントがない場合はどのフォントにも結び付けられません。)
ui-roundedCSS Fonts Module Level 4 で追加 システムのユーザー・インターフェースに使用される既定の丸文字フォント (ウェブコンテンツとデバイスのOSのインターフェースに統一感を出すために使用できます。適したシステムフォントがない場合はどのフォントにも結び付けられません。)
他の値
<family-name> フォントの固有名称を表す<custom-ident>”値もしくは引用符(“'”もしくは“"”)で囲まれた<string>”値 (引用符で囲まないフォント名に数字や記号を含む場合はエスケープしなければならない場合があります。“<generic-family>”値と誤認されるフォント名は引用符で囲まなければなりません。)
共通キーワード

<generic-family>”値はフォントの総称名を表します。ユーザーのデバイスにインストールされていて使用可能なフォントの中から一つ以上のフォントに結び付けて使用されます。

値の指定方法

font-family”プロパティではコンマ(“,”)で区切ることで複数のフォントの候補を示すことができます。テキストを表示する際には先に記述されたフォントが優先して使用されます。

p { font-family: "游明朝","ヒラギノ明朝",serif;}

使用するフォントが決定される際には1文字ずつ優先順位に従ってフォントが選択されます。フォントがテキストに含まれるすべての文字に対応していない場合は一部の文字だけ他のフォントが使用されることになります。

特に、“<family-name>”値で特定のフォントを指定している場合はユーザーのデバイスにそのフォントがインストールされていない場合はそのフォントは使用できないので、ユーザーごとに表示されるデザインに統一感を持たせたい場合は複数のフォントの候補を示しておくことが推奨されます。仕様書ではリストの最後に最終選択肢として総称名(“<generic-family>”値)で代替フォントを示して堅牢性高めることが推奨されています。

候補として示したフォントがすべて使用できない場合はユーザーのデバイスのデフォルトのフォントが使用されます。

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告(REC) 作業草稿(WD)
font-family
定義あり

定義あり

定義あり

定義あり
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告(REC) 作業草稿(WD)
<family-name>
定義あり

定義あり

定義あり

定義あり
serif
定義あり

定義あり

定義あり

定義あり
sans-serif
定義あり

定義あり

定義あり

定義あり
cursive
定義あり

定義あり

定義あり

定義あり
fantasy
定義あり

定義あり

定義あり

定義あり
monospace
定義あり

定義あり

定義あり

定義あり
system-ui
定義なし

定義なし

定義なし

定義あり
emoji
定義なし

定義なし

定義なし

定義あり
math
定義なし

定義なし

定義なし

定義あり
fangsong
定義なし

定義なし

定義なし

定義あり
ui-serif
定義なし

定義なし

定義なし

定義あり
ui-sans-serif
定義なし

定義なし

定義なし

定義あり
ui-monospace
定義なし

定義なし

定義なし

定義あり
ui-rounded
定義なし

定義なし

定義なし

定義あり

使用例

フォントの総称名で指定する

p { font-family: serif;}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

p { font-family: sans-serif;}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

p { font-family: cursive;}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

p { font-family: fantasy;}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

p { font-family: monospace;}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

p { font-family: emoji;}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

p { font-family: math;}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

p { font-family: fangsong;}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

デバイスの既定のフォントを使用する

p { font-family: system-ui;}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

p { font-family: ui-serif;}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

p { font-family: ui-sans-serif;}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

p { font-family: ui-monospace;}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

p { font-family: ui-rounded;}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

<family-name>”値で指定する

p { font-family: "游明朝","ヒラギノ明朝",serif;}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク