CSS
font-family
elcapitan
ヒラギノ角ゴ

El Capitan からの font-family の指定方法

More than 1 year has passed since last update.

El Capitan から ヒラギノ角ゴシックが、ヒラギノ角ゴに変更となり、フォントのウェイトがW0-W9まで収録されています。

Yosemite までの font-family

font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meryo, "メイリオ", Osaka, "MS Pゴシック", "MS P Gothic", sans-serif;
font-weight: 300;

この設定をしていたのですが、

El Capitan からの font-family

El Capitanからは、以下の指定をするとヒラギノ角ゴを使うことができます。
font-weightを使った細かいウェイトの指定をすることができるようになりました。
W0 - W9 まで使えるので、細字から太字まで使うことができます。

font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meryo, "メイリオ", Osaka, "MS Pゴシック", "MS P Gothic", sans-serif;
font-weight: 300;

ヒラギノ角ゴシック W1/W2 を Yosemite でも使いたい場合

実は、YosemiteからはヒラギノのW1/W2については隠しフォントとして収録されています。

font-family: "HiraginoSans-W1", ".HiraKakuInterface-W1";
font-family: "HiraginoSans-W2", ".HiraKakuInterface-W2";

という指定をしてあげると、El CapitanでもYosemiteでも多少フォントの形が異なりますが、使うことができます。

sample

スクリーンショット 2015-10-08 11.45.52.png

See the Pen vNxWeG by hiroaki wakatsuki (@puzzeljp) on CodePen.