CSS3 – font-family

概要

使用する書体を指定する。

  • 特定のフォント名ではない総称がある
  • フォント名は複数指定できる
  • 複数指定された場合、前の方からサーチし、クライアント側にフォントがあればそれを使用
  • 指定したフォントが存在しない場合、クライアント側のデフォルトフォントが使われる

書式

font-family: [フォント1] , [フォント2] , ...

  • フォント名は引用符~ダブルクォート(")かシングルクォート(')で囲む
  • ただし総称フォントを指定する場合は引用符で囲わない

フォント名

種類

sans-serif ゴシック体などセリフがないフォント
serif ローマン体・明朝体などセリフがあるフォント
monospace 等幅のフォント
cursive 筆記体・草書体に属するフォント
fantasy 装飾的なフォント

表示例

sans-serifはゴシック系のフォントです。

serifは明朝系のフォントです

monospaceは等幅のフォントです。

cursiveは筆記体・草書体のフォントです。

fantasyは装飾的なフォントです。

※総称フォントは引用符で囲いません

複数指定

動作

フォントを複数指定することができる。各フォントは','(カンマ)で区切り、スペースの有無は任意

クライアントは前の方から順番にサーチし、表示対象に使用可能なフォントであればそれを使い、そうでなければ次のフォントを探す。

最終的に利用可能なフォントがなければクライアント側のデフォルトフォントが使われる。

表示例

フォントの複数指定~’YU Gothic UI’, sans-serif

フォントの複数指定~’存在しないゴシックフォント’, sans-serif

フォントの複数指定~’存在しない明朝フォント’, serif

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です