font-family CSS プロパティとは
トピック：要素のフォントを指定する 事ができるこのfont-familyプロパティは、フォールバックシステムとしていくつかのフォント名を保持できるブラウザが最初のフォントをサポートしていない場合は、次のフォントを試す。他のフォントが利用できない場合、ブラウザーがgenericファミリーで類似のフォントを選択できるように、必要なフォントから始めて、常に一般的なファミリで終わります。
プロパティ font-family
実例 コード 1
サンプル コードを試すbody { font-family: Arial, Helvetica, sans-serif;}h1 { font-family: "Times New Roman", Times, serif;}
使用上の注意：- フォントファミリの名前が複数の単語である場合は、引用符で囲む必要が、ある
font-family: "Times New Roman", Serif;
情報：font-size やその他のフォント関連プロパティを一度に設定するには、ショートハンドプロパティ font を使うと便利
プロパティ 定義と使用法
| デフォルト値・初期値 : | ユーザエージェントに依存する |
|---|
| 適用対象 : | 全要素.::first-letter and ::first-line. |
|---|
| 継承 : | 継承する |
|---|
| メディア : | visual |
|---|
| 計算値 : | 指定値 |
|---|
CSS Version | CSS1 ～ |
|---|
| Animation type : | discrete |
|---|
| JavaScript 構文 | object.style.fontFamily="funWebref" |
|---|
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
|---|
| CSSの構文 | font-family: family-name |generic-family |initial |inherit; |
|---|
プロパティ値
| 値 | 説明 |
family-name | フォントファミリーの名前。たとえば、 "Times"と "Helvetica"はフォントファミリーです。空白を含むフォントファミリー名は引用符で囲む必要があります。 |
generic-family | 必要なフォントの選択肢が利用できない場合、一般的なフォールバックメカニズムとして汎用フォントファミリを使用できる。一般的なフォントファミリー名はキーワードなので、引用符で囲むことはできません。
一般的なフォントファミリは、フォントファミリー名のリストの最後の選択肢です。次の一般的なファミリーが定義されています。- serif （例：Times）
- sans-serif （例えば、Arial）
- cursive（例えば、Zapf-Chancery）
- fantasy （例えば、Western）
- monospace （例：Courier）
- フォントの組み合わせの詳細
|
initial | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
使用上の注意：font-family プロパティでは、優先順位の高い方から低い方へ、フォントのリストを指定する。フォント選択はユーザのシステム上に存在するリスト中の一番最初に指定された、フォントを選んで終わるとは 限りらない
サポートするデスクトップ ブラウザ対応・互換性
| 機能 | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本的なサポート | 1.0 | 1.0 (1.7 or earlier) | 3.0 | 3.5 | 1.0 |
|---|
サポートするモバイル ブラウザ対応・互換性
| 機能 | Android | Firefox Mobile | IE Phone | Opera Mobile | Safari Mobile |
|---|
| 基本的なサポート | 1.0 | 1.0 (1) | 6.0 | 6.0 | 1.0 |
|---|
CSS font-family | CSS プロパティ 値| 意味 使い方 実例 – WebRef