CSSのfont-familyの書き方でWindows向けにメイリオを指定する際、私はこれまでファミリー名に日本語名と英字名Meiryoをわざわざ併記していたのですが、実は英字名だけ指定すれば十分だったということを最近知りました。
今でもfont-familyの指定方法を検索すると、2010年代のブログ記事などで日本語名と英字名を併記している例がよく出てきます。 「古いブラウザ向けに併記が必要だった」 そうなのですが、冷静に考えると下表にあげた４つのパターンのうち B でない限り、英字名だけ指定すれば十分だったはずに思えます。
| 古いブラウザ | 和名 | 英字名 | |
|---|---|---|---|
| A | ○ | ○ | |
| B | ○ | × | ←こんなケースあったの？ |
| C | × | ○ | |
| D | × | × | 未対応の場合 |
そこで、BrowserStack Live（下図）を使って、Windows版の古いブラウザで検証してみました。
2014年2月掲載のこちらの記事によると、font-familyに"メイリオ", Meiryoと併記するのはすでに旧ブラウザ対応という扱いでサンプルコードが載っていました1。
よって、BrowserStackで検証するブラウザの対象バージョンは2014年2月以前にリリースされたものに絞れます（下図）。
※このタイムラインチャートの作り方はこちらの記事参照
検証環境について
- BrowserStackにはWindows Vistaがないので、メイリオが搭載されたOSで遡れるのはWindows 7までです。そのWindows 7環境にインストールされた各ブラウザについて、チャートの左端の点で示したものが、利用可能な最も古いバージョンです（例: Firefox 3.0.18など）。
- Firefox/Chrome/Operaについては、今回の検証に用いたバージョンのみ示してあります。実際には各バージョンの点の間に多数のバージョンが存在します。
- SafariはWindows用の方です。
検証方法
サンプルのコードはこちら2： https://codepen.io/kaz_hashimoto/pen/rNdyVVO
<div class="font-meiryo-ja">
<p class="text"><span>あのイーハトーヴォのすきとおった風ABCDEFGHIJKLM1234567890</span></p>
</div>
書体の確認に用いるテキストを<span>で囲っているのは、JavaScriptでテキストの表示幅を計測するためです（後述）。
.font-meiryo-ja {
font-family: 'メイリオ', 'Noto Sans JP';
}
.font-meiryo {
font-family: Meiryo, 'Noto Sans JP';
}
.font-noto {
font-family: 'Noto Sans JP';
}
CSSに記述するfont-familyの値は、フォールバックにNoto Sans JPを指定しています。これは結果の判別をしやすくするためです。サンプルのコードではJavaScript使って各テキストの表示幅を取得し、それをNoto Sans JPで表示したテキストの表示幅と比較します。２つの幅が一致した場合は、指定したフォントが適用されなかったと判断してグレーアウト表示するようにしました。※念のため目視でも結果をチェックしてあります。
注）Firefox 3は@font-faceが未対応だったためGoogle Fontsを表示できず、Noto Sans JPを指定した箇所はブラウザの既定のフォントになってしまいますが、表示書体の判定結果には影響しません。
検証結果
Windows 7のメイリオ
まずはいきなり何か起きそうな予感のするペアから。IE8とSafari 4です。
全く問題なし！ 日本語名も英字名もちゃんと認識してくれてます。
次はChrome 15とFirefox 3.6。これも問題なし。
そしてFirefox 3.6(再掲）とFirefox 3.0.18。これも大丈夫でした。
最後にOpera。Opera 15とOpera 12.16
違いが出ました！ Opera 12.16は"メイリオ"の日本語名を認識しませんでした。Opera 10.63（下図右）でも同様です。
Windows 8.1のメイリオと游書体
游書体が加わったWindows 8.1についてもテストしてみましょう。
まずはIE11とSafari 5.1.7 から。
全く問題なし！游書体の日本語名も英字名もちゃんと認識してくれてます。
次にChrome 32とChrome 31。
違いが出ました！Chrome 31（右）は游書体の日本語名を認識しませんでした。メイリオの日本語名は認識してるのに。
Chrome 22 (下図左）でも同様です。一方、Firefox 16.0.2は問題なしです。
そしてOpera 19とOpera 15。メイリオでは問題なかったOpera 15（右）ですが、游書体の日本語名は認識しませんでした。
Opera 12.16（下図右）はメイリオも游書体も日本語名を認識しません。
まとめ
ファミリー名の日本語名・英字名への対応に差が出たブラウザはOperaとChromeの旧バージョンでした。日本語名の対応にバラツキはありましたが、いずれのバージョンも英字名は認識できています3。一方、冒頭にあげた表のパターン B 「和名○, 英字名×」はありませんでした。
| OS | ブラウザ | メイリオ | Meiryo | 游ゴシック 游明朝 |
Yu Gothic Yu Mincho |
|---|---|---|---|---|---|
| Windows 7 | Opera 15+ | ○ | ○ | n/a | n/a |
| Windows 7 | Opera 10.6〜12.16 | × | ○ | n/a | n/a |
| Windows 8.1 | Chrome 32+ | ○ | ○ | ○ | ○ |
| Windows 8.1 | Chrome 15〜31 | ○ | ○ | × | ○ |
| Windows 8.1 | Opera 19+ | ○ | ○ | ○ | ○ |
| Windows 8.1 | Chrome 15〜18 | ○ | ○ | × | ○ |
| Windows 8.1 | Opera 12.16 | × | ○ | × | ○ |
昔のブログ記事の中には、Firefoxの古いバージョンで発生していたとの情報が複数あったので、今回の結果は意外でした。もっと昔、Firefox 2以前に起きていたことだったのでしょうか...
-
その記事には、游書体の
font-family指定についてWindows 8.1で確認した結果の表が掲載されており、游書体の英字名が「 × 印（認識せず）」という結果になっていました。冒頭の表のパターン B の実例か? いいえ、残念ながら違うようです。サンプルのコードを調べたところ、これはmacOS向けの英字名YuGothic/YuMinchoを使ってテストしたためだと思われます。 ↩ -
JavaScriptは古いブラウザでも動作するようにコーディングしてあります。 ↩
-
BrowserStackの環境ではOSの言語設定は英語です。それが結果に影響しているかどうかは不明です。念のためブラウザの言語設定を日本語(ja)優先に変更しても検証結果は変わりませんでした。 ↩