CSSプロパティfont-familyによるのフォント指定の基本
2007.06.18 Author: たく
Webサイト制作にするにあたって
ユーザーが情報を得るための文字のフォントを
いかに扱うかは非常に重要な問題です。
当然PC環境によってインストールされている
文字フォントは違うため、CSSによって使用する
フォントを限定するのがセオリーですが
意外とこのあたり、自分も含めて曖昧な部分があると思うので
まとめてみました。
font-family プロパティ
空白類文字が含まれる場合は、引用符で括る必要があります。
個別のフォントファミリー名を指定することができますが、
一般フォントファミリー (Generic Font Family) と呼ばれるキーワードで指定することもできます。
いかなるフォントをCSSで指定する際、それらをを代替フォントをあわせて指定するように推奨されています。
一般フォントファミリー (Generic Font Family)
名古屋のWebシステム開発・ネットワーク構築会社 コネクティボへ
ユーザーが情報を得るための文字のフォントを
いかに扱うかは非常に重要な問題です。
当然PC環境によってインストールされている
文字フォントは違うため、CSSによって使用する
フォントを限定するのがセオリーですが
意外とこのあたり、自分も含めて曖昧な部分があると思うので
まとめてみました。
font-family プロパティ
空白類文字が含まれる場合は、引用符で括る必要があります。
個別のフォントファミリー名を指定することができますが、
一般フォントファミリー (Generic Font Family) と呼ばれるキーワードで指定することもできます。
いかなるフォントをCSSで指定する際、それらをを代替フォントをあわせて指定するように推奨されています。
一般フォントファミリー (Generic Font Family)
- ■serif(明朝体)
- Century,Times,Times New Romanなど
- ■sans-serif(ゴシック体)
- Arial,Century Gothic,Chicago,Helvetica,Monaco,Verdanaなど
- ■cursive(草書体)
- Zapf-Chanceryなど
- ■fantasy(装飾フォント)
- Westernなど
- ■monospace(等幅フォント)
- Courier,Courier Newなど
ただし、明朝体、草書体はWebにおいては
好ましいフォントではないので、ページ全体では
ゴシック体を使うのが一般的。
よってまとめると以下の横一列の組み合わせの
CSSの指定が基本ということになります。
Windows
|
Macintosh
|
CSS
|
---|---|---|
MS Pゴシック | Osaka | sans-serif |
MS Pゴシック | 平成角ゴシック | monospace |
MS 明朝 | Osaka-等幅 | serif |