CSS:日本語と英語でのフォントファミリー名のブラウザ対応について・調査編

CSSでフォントを指定するときのフォント名の書き方でブラウザの表示が違う。どうやら日本語、英語で対応が分かれるようだ。

調べる方法

ページ全体のCSS書類ではフォントファミリーの指定を外し、テキスト文に直接 style="font-family: フォント名"を書いてフォントを指定しています。

ソース例:

<p style="font-family: 'ヒラギノ丸ゴ Pro'">CSSでフォントを指定するとき</p>


フォント名はすべて '引用符' で囲んでいます。

フォント名の書き方は次の通り、

  • PostScript 名(英語)
  • フルネーム(日本語)
  • ファミリー(日本語)
  • Full name(英語)
  • Family(英語)

フルネームは、ファミリーにW3、W4、W6、W8などのスタイルがついたもの。スタイルが標準しかないものはファミリーとフルネームが同じです。

フォントの日本語名と英語名はMacのFont Book(日本語版 & 英語版)から
Font Bookの画面

例文

Macのフォント「ヒラギノ丸ゴ Pro W4」とWindowsのフォント「MS 明朝」、そしてアドビの「小塚明朝 Pro B」で例を作りました。

対応するフォントが入っていないMac/PC/スマホ等でみたときはブラウザの標準フォントで表示されます。

「フォントファミリーの指定なし」はブラウザの標準フォント表示になるので、これと同じ表示ならばフォントの指定が効いていないということになります。

ヒラギノ丸ゴ Pro W4

Font Bookのヒラギノ丸ゴ Pro W4 画面
Font Book:ヒラギノ丸ゴ Pro W4

HiraMaruPro-W4(PostScript 名)

CSSでフォントを指定するときのフォント名の書き方でブラウザの表示が違う。どうやら日本語、英語で対応が分かれるようだ。

ヒラギノ丸ゴ Pro W4(フルネーム)

CSSでフォントを指定するときのフォント名の書き方でブラウザの表示が違う。どうやら日本語、英語で対応が分かれるようだ。

ヒラギノ丸ゴ Pro(ファミリー)

CSSでフォントを指定するときのフォント名の書き方でブラウザの表示が違う。どうやら日本語、英語で対応が分かれるようだ。

Hiragino Maru Gothic Pro W4(Full name・英語)

CSSでフォントを指定するときのフォント名の書き方でブラウザの表示が違う。どうやら日本語、英語で対応が分かれるようだ。

Hiragino Maru Gothic Pro(Family・英語)

CSSでフォントを指定するときのフォント名の書き方でブラウザの表示が違う。どうやら日本語、英語で対応が分かれるようだ。

フォントファミリーの指定なし

CSSでフォントを指定するときのフォント名の書き方でブラウザの表示が違う。どうやら日本語、英語で対応が分かれるようだ。

MS 明朝

Font BookのMS 明朝 画面
Font Book:MS 明朝

MS-Mincho(PostScript 名)

CSSでフォントを指定するときのフォント名の書き方でブラウザの表示が違う。どうやら日本語、英語で対応が分かれるようだ。

MS 明朝(フルネーム & ファミリー)

CSSでフォントを指定するときのフォント名の書き方でブラウザの表示が違う。どうやら日本語、英語で対応が分かれるようだ。

MS Mincho(Full name & Family・英語)

CSSでフォントを指定するときのフォント名の書き方でブラウザの表示が違う。どうやら日本語、英語で対応が分かれるようだ。

フォントファミリーの指定なし

CSSでフォントを指定するときのフォント名の書き方でブラウザの表示が違う。どうやら日本語、英語で対応が分かれるようだ。

Font Book(日本語版 & 英語版)で MS 明朝
Font Bookの画面

小塚明朝 Pro B

Font Bookの小塚明朝 Pro B 画面
Font Book:小塚明朝 Pro B

KozMinPro-Bold(PostScript 名)

CSSでフォントを指定するときのフォント名の書き方でブラウザの表示が違う。どうやら日本語、英語で対応が分かれるようだ。

小塚明朝 Pro B(フルネーム)

CSSでフォントを指定するときのフォント名の書き方でブラウザの表示が違う。どうやら日本語、英語で対応が分かれるようだ。

小塚明朝 Pro(ファミリー)

CSSでフォントを指定するときのフォント名の書き方でブラウザの表示が違う。どうやら日本語、英語で対応が分かれるようだ。

Kozuka Mincho Pro B(Full name・英語)

CSSでフォントを指定するときのフォント名の書き方でブラウザの表示が違う。どうやら日本語、英語で対応が分かれるようだ。

Kozuka Mincho Pro(Family・英語)

CSSでフォントを指定するときのフォント名の書き方でブラウザの表示が違う。どうやら日本語、英語で対応が分かれるようだ。

フォントファミリーの指定なし

CSSでフォントを指定するときのフォント名の書き方でブラウザの表示が違う。どうやら日本語、英語で対応が分かれるようだ。