IE11でNotoフォントをWebフォントとして利用した場合、フォントの位置が上寄りになります。line-heightを1.3以下だと文字の上が切れ始めます。Chromeなどでは問題なく表示されます。IEだから諦めるしかないのでしょうか?メイリオでは当たり前ですが問題はありません。
正常に表示させる方法ってありますでしょうか?よろしくお願いいたします。
ベタにvertical-align: bottomとか。
vertical-align: がまったく聞かないようです。下の方がおっしゃるように、元々下のスペースが多いのかもしれません。。。
素直にline-heightを1.4以上にすればいいのでは
他のブラウザでは正常なので、IEに合わせると他のブラウザが崩れてしまいます。。
Notoはイラレで打つと判るが、ディセンダー(文字の下部分のスペース)が非常に大きい。なんでだったか理由は忘れたが、多分これが悪さをしてると思われる。IEがこれをちゃんと処理できないんだろう。vertical-align:baseline にして、それでダメなら諦めるしかなさそうだが。
なにかしら理由があってディセンダーが大きいのですね。Chromeとかでは正常に表示されるのですが・・・ せめて統一してほしいところです。仕方ないので、IEの場合はメイリオに設定しております。
上の方も仰るとおり、>ディセンダー(文字の下部分のスペース)が非常に大きい。これの影響なんだろうけど、なんでなんだろうね。イラレで編集するときなんかイラっとすんだよね。
けど、ブラウザでline-height 1にしても別に切れなかったよ?ボタンとかバナーで使ってるとかかな?親要素でなんかやってない?overflow hiddenとか。line-height 1vertical-align baselineで、ブラウザ間の誤差は少なくなった。2px位。(bottomだとIEだけずれた。)あとは親要素なりで余白調整すればいいんじゃなかろうか。
※PCでIE11 FF chrome safari でCSS変えながらキャプチャ撮ってフォトショで計った結果。
IE11だとこのようになってしまいます。
画像すんごく小さいですが、上部が切れてしまっている感じです。line-height 1vertical-align baselineです。
上でコメさせてもらった者です。言いたかったのは、line-height 1vertical-align baselineでブラウザ間の見え方は差が小さくなるので、あとは親要素でbackground-color と paddingで調整すればよいのでは?ということですね。
メイリオなどでは収まります。
そう通り。結局IEではメイリオで表示されるように対応した。
やはり、それしかないようですね。。。
みんなの回答 6 件
ベタにvertical-align: bottomとか。
素直にline-heightを1.4以上にすればいいのでは
Notoはイラレで打つと判るが、ディセンダー(文字の下部分のスペース)が非常に大きい。なんでだったか理由は忘れたが、多分これが悪さをしてると思われる。IEがこれをちゃんと処理できないんだろう。vertical-align:baseline にして、それでダメなら諦めるしかなさそうだが。
上の方も仰るとおり、
>ディセンダー(文字の下部分のスペース)が非常に大きい。
これの影響なんだろうけど、なんでなんだろうね。
イラレで編集するときなんかイラっとすんだよね。
けど、ブラウザでline-height 1にしても別に切れなかったよ?
ボタンとかバナーで使ってるとかかな?
親要素でなんかやってない?overflow hiddenとか。
line-height 1
vertical-align baseline
で、ブラウザ間の誤差は少なくなった。2px位。
(bottomだとIEだけずれた。)
あとは親要素なりで余白調整すればいいんじゃなかろうか。
IE11だとこのようになってしまいます。
メイリオなどでは収まります。
関連するトピックス