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