Safariでヒラギノ角ゴシックを綺麗に表示させる方法

遅ればせながら、Mac の OS を El Capitan にアップグレードした。

そしたら、Safari で web ページを開くとなんか変な感じが…

ということで、ちょっとした小細工で解決する方法を探した。

1. 太字の表示がおかしい

以前は、ゴシック体の「太字」はヒラギノ角ゴシックの「W6」で表示されていた。ところが、El Capitan では一部のwebサイトで、太字が「W3」を機械的に太字処理したような、ちょっと野暮ったいスタイルに。

太字部分、本来の姿↓と比べると一目瞭然。

2. フォントがＭＳ Ｐゴシックになっている

以前はヒラギノで表示されていたページが、なぜか Office  付属のＭＳ Ｐゴシックに。お世辞にも美しいフォントとは言えないので、元に戻したい… （なお、Office を新たにインストールしたわけではない）

3. 先人の知恵

El Capitan にしてから表示が変わったというブログを発見した。フォントのウェイトが変わったという問題で、僕がきになるのとは違う趣旨だったが、El Capitan では、搭載されたヒラギノフォントの名前が変わっているという点と、@font-face という呪文を使って「CSS上で指定したフォント名」と「実際に使用するフォントの名前」を関連付けできることがヒントになった。

なお、どうやら「太字の表示がおかしい」web ページは、フォント名に「Sans-serif」や「Hiragino Sans」などではなく、「'ヒラギノ角ゴ Pro W3'」と指定しているようである。「W3」名指しで、それを無理やり太字にしたという解釈か。

4. これで解決!!

以下のような CSS を書き、ユーザースタイルシートとして Safari に読み込ませた。

/*Safariでヒラギノ角ゴシックをきれいに表示させるCSS*/
@font-face {
font-family: sans-serif;
src: local(HiraginoSans-W3);
font-weight: normal;
}
@font-face {
font-family: sans-serif;
src: local(HiraginoSans-W6);
font-weight: bold;
}
/*↓2017.02.14追加*/
@font-face {
font-family: 'Hiragino Kaku Gothic Pro W3';
src: local(HiraginoSans-W3);
font-weight: normal;
}
@font-face {
font-family: 'Hiragino Kaku Gothic Pro W3';
src: local(HiraginoSans-W6);
font-weight: bold;
}
/*↑2017.02.14追加*/
@font-face {
font-family: 'ヒラギノ角ゴ Pro W3';
src: local(HiraginoSans-W3);
font-weight: normal;
}
@font-face {
font-family: 'ヒラギノ角ゴ Pro W3';
src: local(HiraginoSans-W6);
font-weight: bold;
}
@font-face {
font-family: 'ヒラギノ角ゴ ProN W3';
src: local(HiraginoSans-W3);
font-weight: normal;
}
@font-face {
font-family: 'ヒラギノ角ゴ ProN W3';
src: local(HiraginoSans-W6);
font-weight: bold;
}
@font-face {
font-family: 'ＭＳ Ｐゴシック';
src: local(HiraginoSans-W3);
font-weight: normal;
}
@font-face {
font-family: 'ＭＳ Ｐゴシック';
src: local(HiraginoSans-W6);
font-weight: bold;
}
@font-face {
font-family: 'MS P Gothic';
src: local(HiraginoSans-W3);
font-weight: normal;
}
@font-face {
font-family: 'MS P Gothic';
src: local(HiraginoSans-W6);
font-weight: bold;
}
@font-face {
font-family: 'MS PGothic';
src: local(HiraginoSans-W3);
font-weight: normal;
}
@font-face {
font-family: 'MS PGothic';
src: local(HiraginoSans-W6);
font-weight: bold;
}

なお、Safari に読み込ませる方法は、CSSを記述したテキストファイルを適当な名前.css(hiragino.css)で好きな場所に保存し、それを Safari メニュー > 環境設定 > 詳細 > スタイルシート で指定するだけ。

テキストファイルを保存する際、OS標準の「テキストエディット」を使う場合は、「標準テキストにする」のをお忘れなきよう。

最終更新：2016.7.13 'ヒラギノ角ゴ ProN W3' の指定に対応。(NHKニュースなど)