El Capitan登場で、CSS font-familyはこう変更しよう

Mac OS X 10.11 El Capitanの登場で新たなフォントが使えるようになったので、CSS font-familyの変更例を紹介します。

El Capitanの新フォント

OS X El Capitanでは、新たに4つのフォント「クレー」「筑紫A丸ゴシック」「筑紫B丸ゴシック」「游明朝体+36ポかな」が追加されました。さらに、おなじみ「ヒラギノ角ゴ」に新たなウェイトが追加され、W0〜W9までの全10ウェイトをすべて利用できるようになりました。

新フォントに関しては、普通のウェブサイトで使うことはあまりないかもしれません（使っても面白そうだと思います）が、ヒラギノ角ゴの利用に関してはフォント名の変更という注意点があります。

ヒラギノ角ゴはEl Capitanからフォント名・TrueType名が変わり、英語表記では「Hiragino Sans」に、日本語表記では「ヒラギノ角ゴシック」になりました。

そのため従来の「Hiragino Kaku Gothic Pro」や「ヒラギノ角ゴ ProN」等では新ウェイトを使うことができないようです。が、互換性が維持されており従来表記でもW3とW6はそのまま使えるため、新しいウェイトを用いない場合は変更の必要はありません。

Photoshop等でもヒラギノ角ゴシック W3とヒラギノ角ゴ ProN W3、ヒラギノ角ゴ Pro W3が並列して存在しややこしいことになってますが、新フォント名の「ヒラギノ角ゴシック」は、これまでの「ヒラギノ角ゴ ProN」と同じになります。

また、フォントの拡張子が「.OTF」から「.TTC（TrueType フォントコレクション）」に変更になり、ヒラギノ角ゴ StdN W8やPro W3なども「ヒラギノ角ゴシック W○.ttc」に格納されるようになりました。（この辺知識ガバガバなので間違ってたらゴメンなさい）

結論としては、OS X El Capitanのユーザー用に新ウェイトでWebサイトを見てもらいたい場合は

font-family: Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", ...;

のように記述すれば良いと思います。ウェイトはfont-weightで指定しましょう。100〜900まで使えるなんて感動ですね。Yosemite以下ではHiragino Sansは使えないので、これまでのフォント名を後ろに併記するのを忘れずに。

あと、僕のオススメfont-family記事はこちらです。