emuramemo

製品レビュー、HTML/CSS、webデザイン、音楽、その他いろいろ

CSSでfont-familyに小塚ゴシックを使うときに注意すること

web制作で色々と悩ましい日本語フォント。

最近はwebデザインでのスタンダードなフォントに、メイリオ・ヒラギノ角ゴに加え、游ゴシックも普及しているのでしょうか。

 

ですが、小塚ゴシックで作られてるwebデザインデータをもらう機会が増えている気がします。

”小塚ゴシック(こづかごしっく)とは、小塚昌彦が制作指揮を行いAdobeが作成したゴシック体の和文OpenTypeフォント。Adobe ReaderなどのAdobe製品に付属している”

小塚ゴシック - Wikipedia

 

Adobe Readerに付属とのことなので、結構な数のPCに入ってるんじゃないでしょうか。

 

しかし、小塚ゴシックでデザインがくると、悩ましい点があります。ブラウザでの表示に少し難ありなのです。

 

 

まず、HTML・CSSソースは以下の通り

 

では実際に、chromeでの表示です。

f:id:emj1025:20150331192250g:plain

ちゃんと表示されます。特に違和感は無いですね。

 

IEで文字が上に寄る

f:id:emj1025:20150331192100g:plain

Windows7 IE11での表示

Windows7のIEで見ると、文字が上付いてしまいます。というか、ボックスからはみ出します。paddingを付けてやっとボックスに入るくらいです。
他のWindowsやMac環境ではどうなるのか不明ですが、このズレ具合はアウトなんじゃないかなぁと。

 

Firefoxでうまくフォントが読み込まれない

f:id:emj1025:20150331192335g:plain

Firefoxでの表示
細字のタイトルにアンチエイリアスがかかっていません。FirebugでCSSの記述を確認すると、小塚を指定してる部分がグレーアウトしています。

 

対策

基本フォントをヒラギノやメイリオに変更してよいかデザイナーに確認

デザインが上がってきた時に、デザイナーにこの表示の事を伝えるとヒラギノで了承してくれたりします。意外と「なんとなく小塚使ってた」「単純にウェイトが複数あって便利だから」なんてこともあります。

小塚はウェイトが豊富で便利ですが、webデザインで様々なウェイトを使われてても、ブラウザではnormalかboldしか再現できません。ここも注意です。

 

部分的にfont-familyをヒラギノやメイリオで対応する

全体は小塚を指定しつつ、backgroundなどの装飾がつく部分にはヒラギノやメイリオのfont-familyを指定し直す。フォントの混在が少し気持ち悪いかもしれません。

 

IEは無視してよいか確認する

「対応ブラウザはchromeだけでいいよ」って案件なら思い切ってIEを無視してみるのもありかも。なかなか無いと思いますが。

 

 

というわけで根本的に解決する方法がみあたりませんでした。他に何かよい解決方法あるでしょうか?調べてもあまりでてこなかったもので。できれば小塚も使ってみたいですよね。

 

追記

どうやら游書体でもおなじような現象がおこるみたいです。IEぃぃぃい!

qiita.com

 

フォントのふしぎ  ブランドのロゴはなぜ高そうに見えるのか?

フォントのふしぎ ブランドのロゴはなぜ高そうに見えるのか?

 

 

emuramemo(c) All Rights Reserved.