CSSのフォントの指定

使用フォントの指定

指定したフォントで表示させる。

font-family: "固有フォント名","一般フォント名";

• フォントの適応は左から順番に閲覧環境に適応するフォントを探し、マッチした時点で評価を止め、そのフォントで表示する。
• フォント指定には固有フォント名称以外に字体を表す一般名称がある。（以下の表を参照）
• フォント指定にはCSSのfont-familyプロパティにて指定をおこなう。
• 指定がない場合にはブラウザのデフォルトフォントが使用される。
• ブラウザ、OSによってデフォルトフォントに違いがある。
• 出来るだけインストール環境OSやバージョンなどに依存するフォント指定は行わない。
• フォントにはフォントファミリー名とフォント名とがあり、混用は・・・。
• <font>〜</font>指定はHTML 4.01では非推奨でHTML5では廃止予定なので、face="フォント名"は使用しない。
• Windows版のIE5.5及び、5.5SP1ではsans-serifを指定した場合に文字化けを起こす。（日本語を含んでいないフォントが使用されるため）
• 日本語文字列を日本語を含まない欧文フォント指定で表示する場合、日本語環境のWebブラウザでは日本語フォントからその文字を補完して表示する。
• 文字の字形によって文字ごとに時幅が調整されているプロポーショナルフォントと全ての文字が同じ幅を持つ等幅フォントがある。
• 欧文フォントとして等幅フォントでも日本語が補完された場合、そのフォントとの比率が1:2とならない場合がある。
• x-heightとは小文字のエックスの高さであり、欧文がほぼ小文字で書かれるため、記号等はこのサイズを基準としている場合が多い。（○、●など）
• 日本語、英文まじりの文章で欧文フォント指定がなされている場合、欧文フォントに在る文字（○、●など）はそのまま使用されるのでサイズが合わなくなる場合がある。
• WinとMacで共通のフォント（見た目が厳密に同じという訳ではない）Arial,Arial Black,Comic Sans MS,Courier,Courier New,Georgia,Impact,Times New Roman,Trebuchet MS,Verdana
• サーバからフォントデータをダウンロードして文字に適応するウェブフォントというものもある。（厳密にこだわる、あるいはデザイン的な問題で必要とする場合）
• 標準フォントを使用するように指定する場合は font-style:normal; とする。
• 名前に 日本語 あるいは スペースが含まれるフォントは '〜' か "〜" で囲う。
• Opera は、日本語名があるフォントに関しては日本語名しか受け付けないらしい。

Windows、Mac、使用するブラウザでそれぞれ一般名にデフォルトで指定されているフォントは違っている。（それぞれの比較キャプチャは もうパンツははかないさんのところを参照）

• ＭＳ ゴシック/明朝にはバージョンがあり、字形は必ずしも同一ではない。（ＭＳ ゴシック/MS 明朝）
• ＭＳ ゴシック/明朝はMacのMS Offiseにバンドルされているので、一部Macでも使用可能
• メイリオはMacのMS Offiseにバンドルされているので、一部Macでも使用可能
• メイリオはヒラギノ角ゴシック Pro W3と字幅がほぼ同じ
• ヒラギノ○○はWindowsにもインストール可能。しかしぼけた感じに表示。基本的にはWeb制作者に寄るものとして自力で対処を期待。
• ヒラギノ○○ ProNは（バージョンにより収容グリフ数等に違いがある）はOS X 10.5以降
• ヒラギノ○○ Pro（バージョンにより収容グリフ数等に違いがある）はOS X 10.0以降
• Osakaの母字は平成各ゴシックらしい。
• AndroidのDroid Sans Japaneseにはボールドが無い。
• 日本産Android端末はメーカーオリジナルの日本語フォントが入ってるケースがある。
• 日本産Android端末はメーカーオリジナルの日本語フォントが入ってるケースがある。
• iPhoneやAndroidに関しては一般的には選択肢が無く、デバイスのデフォルトに任せるのが無難。
• Windows は ArialはMacの Helveticaに幅を合わせて作成されているので、文字列幅が揃うはず。
• IEで日本語表記のフォント名を先頭に記述しないと、フォントのサイズがおかしくなるバグがあるらしい。
• WindowsのIE6では文字コードがUTF-8だとTimes New Romanが使われる
• WindowsのIE6ではsans-serif指定でShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」になる。
• フォント名が日本語のものや間にスペースが入っているもののみ”や’で囲む。
• 基本的にCSSファイル名に@charset 'UTF-8';の様に文字コードを指定する。
• NN、Firefoxでは ‘Hiragino Kaku Gothic Pro’ など日本語フォントのアルファベット表記は適用されない
• Safari では ‘ヒラギノ角ゴ Pro W3′ などフォント名に日本語が含まれるものは適用されない
• sans-selifとか総称ファミリー名は引用符で囲ってはだめ。
• モバイル機器の欧文フォント搭載比較はTINYTYPEを参照。
• iPhoneやAndroidで共通のものはない・・・ようです。
• Fonts supplied with* Windows 8
• Fonts supplied with* Windows 7
• Fonts supplied with* Windows Vista
• Fonts supplied with* Windows XP SP2
• Fonts supplied with* Windows XP
• OS X Mountain Lion：フォントリスト
• OS X Lion：フォントリスト
• Mac OS X 10.5:フォントリスト
• Mac OS X 10.4: フォントリスト
• Mac OS X 10.3: フォントリスト
• iOS 6：フォントリスト
• iOS 5：フォントリスト
• webデザイナーのナナメガキのCSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係なども参照

各ブラウザのバージョン対応（というかIEの6や7対応）にはWorld Wide Web GuideさんとこのハックもIEの独自拡張条件式も使わないIE(6/7/8)のCSS上書きテクニックが必読。

Windows、Mac、使用するブラウザでそれぞれデフォルトで指定されているフォントは違っている。（それぞれの比較キャプチャは もうパンツははかないさんのところを参照）

それにもつけ、Windowsって7でさえ日本語は文字の表示が貧弱なのですね。英語はまだフォントの違いを判別できますが、日本語だと一文字切り出して違いを判別するどころかゴシックか明朝かも判然としない感じ。この文字の表示だけでちょっとイラッとしたりするのだけど、まぁ世の中では気にならないのでしょうね。

このサイトでの標準フォント（プロポーショナルフォント）指定

font-family: “ヒラギノ角ゴ Pro W3″,”Hiragino Kaku Gothic Pro”,”Osaka”,”メイリオ”,”Meiryo”,”ＭＳ Ｐゴシック”,”MS PGothic”,sans-serif;

特に明朝体を必要とする場合の指定

font-family: “ヒラギノ明朝 Pro W3″,”Hiragino Mincho Pro”,”Osaka”,”メイリオ”,”Meiryo”,”ＭＳ Ｐゴシック”,”MS PGothic”,sans-serif;

サイトをデザインする上でかっこいいフォント

CSSで指定するという事ではないけれど、デザインする上で使えるかっこいいフォントを『バンクーバーのうぇぶ屋』さんの『今更聞けない？！WEBデザイナーなら最低限知っておきたい有名フォントの数々』で紹介されていました。