web制作で色々と悩ましい日本語フォント。
最近はwebデザインでのスタンダードなフォントに、メイリオ・ヒラギノ角ゴに加え、游ゴシックも普及しているのでしょうか。
ですが、小塚ゴシックで作られてるwebデザインデータをもらう機会が増えている気がします。
”小塚ゴシック（こづかごしっく）とは、小塚昌彦が制作指揮を行いAdobeが作成したゴシック体の和文OpenTypeフォント。Adobe ReaderなどのAdobe製品に付属している”
Adobe Readerに付属とのことなので、結構な数の人が小塚ゴシックをインストールしているんじゃないでしょうか。
しかし、小塚ゴシックでデザインがくると、悩ましい点があります。ブラウザでの表示に少し難ありなのです。
ブラウザ上でのフォントの表示
まず、HTML・CSSソースは以下の通り
では実際にブラウザで確認します。
chromeで表示
以下が小塚ゴシック・ヒラギノ角ゴ・メイリオをchromeで表示した結果です。
ちゃんときれいに表示されます。特に違和感は無いですね。
IEで文字が上に寄る
以下はIEで表示した様子です。
Windows7 IE11での表示
Windows7のIEで見ると、文字が上付いてしまいます。というか、ボックスからはみ出します。paddingを付けてやっとボックスに入るくらいです。
他のWindowsやMac環境ではどうなるのか不明ですが、このズレ具合はアウトなんじゃないかなぁと。
Firefoxでうまくフォントが読み込まれない（追記：対策あり）
以下はFirefoxで表示した様子です。
Firefoxでの表示
細字のタイトルにアンチエイリアスがかかっていません。FirebugでCSSの記述を確認すると、小塚を指定してる部分がグレーアウトしています。
/* 追記ここから */
以下、コメントをいただきました。ありがとうございます！
「Firefoxでうまくフォントが読み込まれない」件ですが、
＞font-family: '小塚ゴシック Pro L','Kozuka Gothic Pro Light',sans-serif;
の記述から
font-family: '小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif;
とウェイトを削除すれば、Firefoxでも小塚フォントを表示できるのでは。
font-familyにウェイトを指定しているとFirefoxではフォントが認識されないようでした。
/* 追記ここまで */
スポンサードリンク
対策
対策１.基本フォントをヒラギノやメイリオに変更してよいかデザイナーに確認
デザインが上がってきた時に、デザイナーにこの表示の事を伝えるとヒラギノで了承してくれたりします。
意外と
「なんとなく小塚使ってた」
「単純にウェイトが複数あって便利だから」
なんてこともあります。
小塚はウェイトが豊富で便利ですが、webデザインで様々なウェイトを使われてても、ブラウザでは多くの場合、normalかboldしか再現できません。ここも注意です。
対策2.部分的にfont-familyをヒラギノやメイリオで対応する
全体は小塚ゴシックを指定し、フォントの上下位置に違和感を感じる部分にはヒラギノやメイリオのfont-familyを指定し直す。
この場合フォントの混在が少し気持ち悪いかもしれません。
対策3.IEは無視してよいか確認する
「対応ブラウザはchromeだけでいいよ」って案件なら思い切ってIEを無視してみるのもありかも。なかなか無いと思いますが。
というわけで根本的に解決する方法が見当たりませんでした。他に何かよい解決方法はあるでしょうか？調べてもあまりでてこなかったもので。できれば小塚も使ってみたいですよね。
追記
どうやら游書体でもおなじような現象がおこるみたいです。IEぃぃぃい！
