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;
}
■他参考サイト