‘font-family’の指定方法

‘font-family’の指定について学習します。

フォントは、いろいろな名前を持っています。たとえば、Mac OS および iOS に標準でインストールされているフォント、「ヒラギノ明朝 ProN W3」は下記のように名前が定義されています。

PostScript名:
HiraMinProN-W3
フルネーム:
Hiragino Mincho ProN W3
フルネーム(現地語表記):
ヒラギノ明朝 ProN W3
ファミリー名:
Hiragino Mincho ProN
ファミリー名(現地語表記):
ヒラギノ明朝 ProN

スタイルシートを使用してフォントを指定する際にはこの名前を指定しますが、ブラウザによって解釈が異なるため、すべてのブラウザで同じフォントを指定したい場合は複数の方法で記述する必要があります。ブラウザによる解釈の違いは下記のとおりです。

Safari for Mac OS X, Safari for iOS
Chrome for Mac OS X, Chrome for iOS
PostScript名で指定すると、すべてのフォントを意図通りに表示します。フルネームでも指定出来ますが、「ヒラギノ明朝 ProN W3」のようにフルネームにウェイトを含むもの、「Arial Bold」のようにボールド体、イタリック体などのフォントの場合は解釈されません。
Chrome for Windows
フルネームで指定すると、英語表記・現地語表記に関わらず、すべてのフォントを意図通りに表示します。PostScript名での指定は解釈されません。
Internet Explorer 10
Firefox for Mac OS X
Firefox for Windows
フルネームで指定すると、英語表記・現地語表記に関わらず解釈されますが、「ヒラギノ明朝 ProN W3」のようにフルネームにウェイトを含むものは、ウェイトの部分は無視されます。また「Arial Bold」のようにボールド体、イタリック体などのフォントの場合は解釈されません。さらに、PostScript名も解釈されません。

Georgia の指定例

 

Times New Roman の指定例

 

Helvetica の指定例

 

Arial Bold Italic の指定例

 

Courier New Bold の指定例

 

ヒラギノ角ゴ ProN W6 の指定例

 

ヒラギノ明朝 ProN W6 の指定例