-
ID:D1LRJg さんの質問

IE11でNotoフォントをWebフォントとして利用した場合、フォントの位置が上寄りになります。line-heightを1.3以下だと文字の上が切れ始めます。Chromeなどでは問題なく表示されます。
IEだから諦めるしかないのでしょうか?
メイリオでは当たり前ですが問題はありません。

正常に表示させる方法ってありますでしょうか?
よろしくお願いいたします。

みんなの回答 6 件

ID:GJDYe9 さんの回答

ベタにvertical-align: bottomとか。

ID:D1LRJg

vertical-align: がまったく聞かないようです。下の方がおっしゃるように、元々下のスペースが多いのかもしれません。。。

ID:Haexeq さんの回答

素直にline-heightを1.4以上にすればいいのでは

ID:D1LRJg

他のブラウザでは正常なので、IEに合わせると他のブラウザが崩れてしまいます。。

ID:CWCrCa さんの回答

Notoはイラレで打つと判るが、ディセンダー(文字の下部分のスペース)が非常に大きい。なんでだったか理由は忘れたが、多分これが悪さをしてると思われる。IEがこれをちゃんと処理できないんだろう。vertical-align:baseline にして、それでダメなら諦めるしかなさそうだが。

ID:D1LRJg

なにかしら理由があってディセンダーが大きいのですね。Chromeとかでは正常に表示されるのですが・・・ せめて統一してほしいところです。
仕方ないので、IEの場合はメイリオに設定しております。

ID:L1xkBX さんの回答

上の方も仰るとおり、
>ディセンダー(文字の下部分のスペース)が非常に大きい。
これの影響なんだろうけど、なんでなんだろうね。
イラレで編集するときなんかイラっとすんだよね。

けど、ブラウザでline-height 1にしても別に切れなかったよ?
ボタンとかバナーで使ってるとかかな?
親要素でなんかやってない?overflow hiddenとか。
line-height 1
vertical-align baseline
で、ブラウザ間の誤差は少なくなった。2px位。
(bottomだとIEだけずれた。)
あとは親要素なりで余白調整すればいいんじゃなかろうか。

ID:L1xkBX

※PCでIE11 FF chrome safari でCSS変えながらキャプチャ撮ってフォトショで計った結果。

ID:D1LRJg さんの回答

IE11だとこのようになってしまいます。

ID:D1LRJg

画像すんごく小さいですが、上部が切れてしまっている感じです。
line-height 1
vertical-align baselineです。

ID:8nGLt8

上でコメさせてもらった者です。
言いたかったのは、
line-height 1
vertical-align baseline
でブラウザ間の見え方は差が小さくなるので、あとは
親要素でbackground-color と paddingで調整すればよいのでは?
ということですね。

ID:D1LRJg さんの回答

メイリオなどでは収まります。

ID:3LcPuV

そう通り。結局IEではメイリオで表示されるように対応した。

ID:D1LRJg

やはり、それしかないようですね。。。

最終更新日:2015-06-25 (22,790 views)

関連するトピックス

ページ上部に戻る