HOME > > > フォントをメイリオに設定すると空白が出来る

フォントをメイリオに設定すると空白が出来る

font-familyをメイリオにすると空白が出て困った

font_title

タイトルや画像の行間がやけに空く。marginやpaddingを設定してないのになんでだ?とかなり困りました。
画像の下に空白ができ無い様に、imgにvertical-align:bottom;を入れてるのですが、画像の頭が下に下がっちゃう。
え!?なんでだ?こんな所でハマるなんて。。。
と調べていくと、メイリオの場合のみこの現象が起きてました。

メイリオだけなんで空白ができる?

検索していくと、メイリオを使って改行すると1行分の空白が出来るとか、そもそもMSゴシックなどの基本フォントより空白が大きいなど、困っている方もいる様です。
今までのフォントに合わせてくださいよ。。。

解決した方法

色々いじった結果、私の場合は下記の方法で見られる範囲にはなりました。

bodyにline-heightを入れた。

最初は入れてましたが、途中であっちこっちに移動して、最終的にはbodyに戻ってきました。

imgにつけたvertical-alignを「bottom」から「top」に変えた

これで画像の頭が下に落ちる事もなく解決しました。

ですが、メイリオ以外のフォントだと微妙に下がっちゃう様な気もします・・・

記事のまとめ

最近デザインを出すときにフォントはメイリオにしてと言われる事が増えましたが、空白が出来るとか関係なく私は基本的にメイリオが好きじゃないです。
流行ってるのかなぁ。
なので使っていないとハマる事もありますね。
しかし、こんな所でハマりたくなかった。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket