今回の検証環境

font-familyの指定なし

ブラウザで設定しているデフォルトフォントが適用される
(上のデモはiframeを使っているのでこのページのスタイルは影響しません)。

font-family: sans-serif; を指定

てきすとテキストText IiLlgj@M 012345

てきすとテキストText IiLlgj@M 012345

  • MacのFxはデフォルトフォント、Chrome/Safari/Operaはヒラギノ角ゴ Pro W3が適用される
    (ただ、アルファベット表記でヒラギノ角ゴ Pro W3を指定したものとは英語部分だけ字詰めが微妙に異なる…?)。
  • WindowsはメイリオかMS Pゴシックが適用される(英数字だけ別のフォントが適用される)。
フォントを日本語表記で指定
font-family: 'ヒラギノ丸ゴ Pro';

てきすとテキストText IiLlgj@M 012345

てきすとテキストText IiLlgj@M 012345

font-family: 'ヒラギノ丸ゴ Pro W4';
(ウェイトを指定)

てきすとテキストText IiLlgj@M 012345

てきすとテキストText IiLlgj@M 012345

font-family: 'ヒラギノ角ゴ Pro W3';

てきすとテキストText IiLlgj@M 012345

てきすとテキストText IiLlgj@M 012345

font-family: 'ヒラギノ角ゴ Pro W6';
(太字のウェイトを指定)

てきすとテキストText IiLlgj@M 012345

てきすとテキストText IiLlgj@M 012345

font-family: 'MS P明朝';

てきすとテキストText IiLlgj@M 012345

てきすとテキストText IiLlgj@M 012345

  • MacのChrome/Safari/Operaは日本語表記では適用されない(ウェイトを指定しても同じ)。
  • MacのFxはウェイトあり・なしのどちらの表記でも適用されるが、ウェイトは無視される。
  • Windowsは検証した全ブラウザ(IE/Chrome/Safari/Fx/Opera)で適用された。
フォントをアルファベット表記で指定
font-family: 'Hiragino Maru Gothic Pro';

てきすとテキストText IiLlgj@M 012345

てきすとテキストText IiLlgj@M 012345

font-family: 'Hiragino Maru Gothic Pro W4';
(ウェイトを指定)

てきすとテキストText IiLlgj@M 012345

てきすとテキストText IiLlgj@M 012345

font-family: 'Hiragino Kaku Gothic Pro W3';

てきすとテキストText IiLlgj@M 012345

てきすとテキストText IiLlgj@M 012345

font-family: 'Hiragino Kaku Gothic Pro W6';
(太字のウェイトを指定)

てきすとテキストText IiLlgj@M 012345

てきすとテキストText IiLlgj@M 012345

font-family: 'MS PMincho';

てきすとテキストText IiLlgj@M 012345

てきすとテキストText IiLlgj@M 012345

ウェイトを指定する必要がないフォントはもちろん全ブラウザで適用されますが、ウェイトを指定することができるフォントの場合は下記の通りとなります。

  • ウェイトなしの場合はWindowsとMacの両OSのChrome/Safari/Firefoxと、Windows IE/Operaで適用された(Firefoxは3以降からアルファベット表記にも対応していたようです)。
  • MacのFxはウェイトあり・なしのどちらの表記でも適用されるがウェイトは無視される(W6を指定してもW3になる)。
  • Mac Operaはウェイトを指定しないと適用されない。ウェイトまで指定すればフォントもウェイトも適用される。
フォントをポストスクリプト名で指定
font-family: 'HiraMaruPro';

てきすとテキストText IiLlgj@M 012345

てきすとテキストText IiLlgj@M 012345

font-family: 'HiraMaruPro-W4';
(ウェイトを指定)

てきすとテキストText IiLlgj@M 012345

てきすとテキストText IiLlgj@M 012345

font-family: 'HiraKakuPro-W3';

てきすとテキストText IiLlgj@M 012345

てきすとテキストText IiLlgj@M 012345

font-family: 'HiraKakuPro-W6';
(太字のウェイトを指定)

てきすとテキストText IiLlgj@M 012345

てきすとテキストText IiLlgj@M 012345

font-family: 'MS-PMincho';

てきすとテキストText IiLlgj@M 012345

てきすとテキストText IiLlgj@M 012345

  • Firefox/Operaは対応していません。Chrome/Safariはウェイトも指定すれば適用される(ウェイトも正しく適用される)。
  • Windowsはどのブラウザも対応していません。

まとめをみる