Safariでヒラギノ角ゴシックの太字がきれいに表示されない

MacのOSを
MountainLion(10.86)からSierra(10.12)に一気にグレードアップした。

Safariも 6.2.8から10.1.2 にアップグレードして、SNSも、アプリも快適!!と喜んだのもつかの間、
web ページの表示に違和感を覚える。

自分で昔作ったサイトも、h1、h2、h3などbold指定したところが、字間がパラパラして、行長が伸びている感じ…。
サイドバーとかwidthの短いDivのところで、何箇所か改行されている!!

呆然として、インスペクターで見てみると、

font-family: “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “MS Pゴシック”, “MS PGothic”, sans-serif;

Fontがヒラギノ角ゴになっていない!!

そこで調べてみたら、El Capitan以降、

1. 搭載されたヒラギノフォントの名前が変わっている

2. ヒラギノ角ゴ Pro W3のbold指定には、以前はヒラギノ角ゴ Pro W6を割り当てていたのだが、MS Pゴシックの太字になっているような感じ。

■解決法

Safariでヒラギノ角ゴシックをきれいに表示させるCSS

を参考に以下をbasic.cssに追記

/*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: 'MS Pゴシック';
src: local(HiraginoSans-W3);
font-weight: normal;
}
@font-face {
font-family: 'MS Pゴシック';
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;
}

 

■他参考サイト

CSSでヒラギノ角ゴシックのウェイトを指定する方法

font-familyに指定する2017年春の決定版メモ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください