Webフォントの取り扱いについて

1.Font-family で指定するフォントは

・ フォントファミリー名
・ 総称ファミリー名 (特徴によって分類された総称)

※ 総称ファミリー名を用いると、その特徴にあったフォントが自動的に選択される。
例:
serif : 撥ねがあったり、先端の太さに変化があるフォント。日本語では明朝体。
sans-serif : 撥ね、先端の太さの変化のないフォント。日本語ではゴシック体。

2.Font-familyに複数指定されていた場合は

左から順に検索して、フォントがインストールされていれば、そのフォントで表示される。
よって、通常は、フォントファミリー名  -> 総称ファミリー名の順に並べる。

3.指定されたフォントが、いずれも存在しない場合は、デホルトのフォントが使用される。

デフォルトのフォントとは、ブラウザの種類や表示設定に依存する。
例えば、Windows Chromeブラウザでは、設定 -> フォントのカスタマイズ で、
標準フォントを設定しておくことができる。

4.Windows PC の システムフォントは ?

Windows7
1) システムフォント = メイリオ (VISTA以降、標準搭載)

※ 個人設定(背景で右クリック) -> ウィンドウの色 -> デザインの詳細設定
こちらで、タイトルバーとかメッセージBoxとか部分を選択して、フォントを 変更できます。

2)ブラウザに表示されるフォントは、ブラウザ毎に違うと思います。(最新バージョンで確認)

IE: MS PGothic (Webページフォント)、 MS Gothic (テキスト形式フォント)
ブラウザのインターネットオプション -> フォント で確認、変更できます。

Chrome: MS Pゴシック
ブラウザの設定 -> 詳細設定を表示 -> フォントをカスタマイズ で確認、変更できます。

Windows8
1) システムフォント=Meiryo UI

※ フォントはサイズ以外、標準UIからは変更できなくなっている。(フリーソフトを使って変更・・・)

2)ブラウザに表示されるフォント

Windows7 のケースと同じ (ブラウザのバージョンに依存か・・・?)

5.Safariのフォント

標準フォント: Times New Roman 16
等幅フォント: Courier New 13
※ 日本語フォントでないため、日本語表示はOSに依存するフォントで代替される。
OSバージョンによっては、”明朝”で表示ということもり、ヒラギノに変換する場合はCSSを用いてデフォルトを変更する。

6.Max OS X の標準フォント

OS X 、 iOS とも 標準日本語フォントは、ヒラギノであるが、システムやアプリケーションで、細かな設定が可能。

1) システム/ライブラリ/Fonts
Macのシステム自体が使用するフォントで、変更は厳禁
2) ライブラリ/Fonts
全ユーザーが利用できるフォントの格納場所で、アプリケーションから、フォントパネル表示を開いて、
利用するフォントを設定。
3) ユーザ/ライブラリ/Fonts
フォントをインストールしたユーザーのみが利用できるフォント

7.font-family の指定参考例

【ポイント】
適用優先度の高いフォントファミリーから記述する
フォントファミリー名にスペースや全角文字が含まれている場合は、クォーテーションで囲む
フォントのアルファベット名と日本語名を併記する場合は、日本語名を先に記述する
最後に総称フォントファミリーを記述することで、該当フォントがない環境にも対応する
ダブルバイト(日本語)のフォント名を記述するため、外部スタイルシートの冒頭には「@charset “UTF-8”;」を記述する
記述例:
font-family: ‘ヒラギノ角ゴ ProN W3’, ‘Hiragino Kaku Gothic ProN’, ‘メイリオ’, ‘Meiryo’, ‘MS Pゴシック’, ‘MS PGothic’, sans-serif;

※ 「メイリオ」や「Pゴシック」が入っているMacもあるため、まずはMacのフォントから指定

★ OSやブラウザのバージョン、その他 歴史的な背景から、フォントの適用については一筋縄でいかないことがあります。基本的には、利用する環境をレビューした上で最適な方法を決定することが重要です。

-End-