Dec. 6th,2020
プロパティについて
概要
| 初期値 | ユーザー・エージェントに依る |
| 適用対象 | すべての要素 |
| 継承 | Yes |
| パーセント値 | パーセント値は指定できません |
| 計算値 | “<generic-family>”値と“<family-name>”値をアイテムとするリスト |
| アニメーション | 離散 |
“font-family”プロパティは優先順位付けされたフォント名やフォントの総称名のリストを定義します。テキストを表示するのに使用するフォントを指定することができます。
“font-family”プロパティで指定されたフォントが実際に使用されるかは完全にユーザーの閲覧環境に依ります。ユーザーのデバイスにインストールされていないフォントは表示されず、他のフォントが使用されます。
サンプルコード
p { font-family: "游明朝","ヒラギノ明朝",serif;}
値
| 値 | 説明 |
|---|---|
| “<generic-family>”値 | |
| serif | セリフ体 (形式ばった、ストロークの端に飾りや払いがある字形。日本語では明朝体のこと。一般に文字ごとに幅が異なるプロポーショナルフォントです。必ず一つ以上のフォントと結び付けられますが、すべての文字が含まれるとは限らないため一部で異なるフォントが使用される場合があります。) |
| sans-serif | サンセリフ体 (太さがほぼ一定でストロークの端に飾りや払いがない字形。日本語ではゴシック体のこと。一般に文字ごとに幅が異なるプロポーショナルフォントです。必ず一つ以上のフォントと結び付けられますが、すべての文字が含まれるとは限らないため一部で異なるフォントが使用される場合があります。) |
| cursive | 形式ばっていない、ペンやブラシで書かれた手書きのような字形 (行書体など。) |
| fantasy | 装飾的、表現的な字形 (パイフォントや絵文字などの実際の文字を表さない字形は含まれません。) |
| monospace | 等幅フォント (すべての文字が同じ幅を持つ字形。プログラムのコードなどを表現するために使用されます。必ず一つ以上のフォントと結び付けられますが、すべての文字が含まれるとは限らないため一部で異なるフォントが使用される場合があります。) |
system-ui |
ユーザー・エージェントが動作しているプラットフォームの既定のフォント (OSの標準システムフォント。同じブラウザでも異なるOSのデバイスでは異なるフォントが使用されます。ウェブコンテンツとデバイスのOSのインターフェースに統一感を出すために使用できます。) |
| emoji |
絵文字フォント |
| math |
数学的表現のための字形 (数式を表現するための引き延ばし可能な記号などを含みます。) |
| fangsong |
中国語の仿宋体 (宋体と楷書体の中間の書体でやや斜めになった払いの表現が小さめの書体です。中国の行政文書でよく使用されます。) |
| ui-serif |
システムのユーザー・インターフェースに使用される既定のセリフ体フォント (ウェブコンテンツとデバイスのOSのインターフェースに統一感を出すために使用できます。適したシステムフォントがない場合はどのフォントにも結び付けられません。) |
| ui-sans-serif |
システムのユーザー・インターフェースに使用される既定のサンセリフ体フォント (ウェブコンテンツとデバイスのOSのインターフェースに統一感を出すために使用できます。適したシステムフォントがない場合はどのフォントにも結び付けられません。) |
| ui-monospace |
システムのユーザー・インターフェースに使用される既定の等幅フォント (ウェブコンテンツとデバイスのOSのインターフェースに統一感を出すために使用できます。適したシステムフォントがない場合はどのフォントにも結び付けられません。) |
| ui-rounded |
システムのユーザー・インターフェースに使用される既定の丸文字フォント (ウェブコンテンツとデバイスのOSのインターフェースに統一感を出すために使用できます。適したシステムフォントがない場合はどのフォントにも結び付けられません。) |
| 他の値 | |
| <family-name> | フォントの固有名称を表す“<custom-ident>”値もしくは引用符(“'”もしくは“"”)で囲まれた“<string>”値 (引用符で囲まないフォント名に数字や記号を含む場合はエスケープしなければならない場合があります。“<generic-family>”値と誤認されるフォント名は引用符で囲まなければなりません。) |
| 共通キーワード | |
“<generic-family>”値はフォントの総称名を表します。ユーザーのデバイスにインストールされていて使用可能なフォントの中から一つ以上のフォントに結び付けて使用されます。
値の指定方法
“font-family”プロパティではコンマ(“,”)で区切ることで複数のフォントの候補を示すことができます。テキストを表示する際には先に記述されたフォントが優先して使用されます。
p { font-family: "游明朝","ヒラギノ明朝",serif;}
使用するフォントが決定される際には1文字ずつ優先順位に従ってフォントが選択されます。フォントがテキストに含まれるすべての文字に対応していない場合は一部の文字だけ他のフォントが使用されることになります。
特に、“<family-name>”値で特定のフォントを指定している場合はユーザーのデバイスにそのフォントがインストールされていない場合はそのフォントは使用できないので、ユーザーごとに表示されるデザインに統一感を持たせたい場合は複数のフォントの候補を示しておくことが推奨されます。仕様書ではリストの最後に最終選択肢として総称名(“<generic-family>”値)で代替フォントを示して堅牢性高めることが推奨されています。
候補として示したフォントがすべて使用できない場合はユーザーのデバイスのデフォルトのフォントが使用されます。
使用例
フォントの総称名で指定する
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年以上も前にナギコが書き残した意見に賛同したい。
