WEBフォントの空白対策

Question

Mono Social Icons Fontを使って、グローバルナビを作ったのですが、下記のように上部にこのWEBフォント特融の空白が空きます。
上下の青い線が、ボックスの境目です。

レスポンシブで作っているのですが、空白が何PXかもわかりませんし、そもそも固定された空白なので％に出来ません。

レスポンシブはすべて%にしなくてはならないという方もいますが、現場ではどう考えていますか？

PX固定でもブラウザのサイズを一通りPCで変えて、別にこの部分は問題ないという場合も有ると思いますが、やはり、すべて％にこだわるのがプロでしょうか？

Answer 1

レスポンシブで強く意識するのは横幅であることが多いと思いますが、グロナビということなので、ざっくりとはPC用は画面上部に細めで、スマホは画面下部にやや太めで設置するようなケースでしょうか。

定義にもよりますが、ある程度の妥協込みでも納期に間に合わせることを重視するのもプロだと思いますので、たしかにWebフォントアイコンは、その文字(アイコン)ごとに高さや縦位置が違う場合には個々にline-heightやfont-sizeで調整しちゃいますね。

もし、クオリティ重視のプロという観点が見た目は当然として、シンプルなソースで柔軟に対応可能なレスポンシブということなら、ここからは案ですが「%」ではなく「vw」「vh」「rem」などの絶対値になる単位ですべてを統一して、絶対値ではあるんだけどbody等を基準として、それ以外はその基準からの相対値で数字を決めていけば、Webフォントの今回のようなケースにも対応できる可能性はあります。

若干解釈が曖昧ですが、たしかline-heightの%とheightの%とでは100%基準の基準が違ったかと思います。
＊heightは親要素のheightに対しての%で、line-heightはfont-sizeの%だったような。。。

ただし、ieの古いバージョンやAndroidでは「vw」「vh」が効かないか解釈がおかしかったり色々トラブルの元なのでオススメはできません(^^;

Comments

[退会済みユーザー]

分かりにくくてすいません。

下記で少しは分かりやすくならないでしょうか？
https://jsfiddle.net/mg4enw2b/4/

TOPとBLOGは、上記フォントに無かったのでここだけマテリアルアイコンを使っています。

＞＞＞
ここからは案ですが「%」ではなく「vw」「vh」「rem」などの絶対値になる単位ですべてを統一して、絶対値ではあるんだけどbody等を基準として、それ以外はその基準からの相対値で数字を決めていけば、Webフォントの今回のようなケースにも対応できる可能性はあります。

上記の単位を使えば上部に空白が出来ないという事でよろしいでしょうか？

[退会済みユーザー]

そんな新しい方法があったのですね。
＞＞＞
ここからは案ですが「%」ではなく「vw」「vh」「rem」などの絶対値になる単位ですべてを統一して、絶対値ではあるんだけどbody等を基準として、それ以外はその基準からの相対値で数字を決めていけば、Webフォントの今回のようなケースにも対応できる可能性はあります。

下記の認識でよろしいでしょうか？
＊％は親要素の何％かに対して上記はビューポートに対して、（表示画面に対して）何%と計算する。

１VWは、画面サイズの1%となる。

＊デメリットアンドロイドの対応が、まだ追いついていない。今の対象ブラウザは4.0以上？なので、2年くらいは、実務では使えない？

Android Browerv4.4 ~v4.4 ~v4.4 ~

[makoto]

フォントには、単に「高さ」だけではなく、アルファベットの「x」を基準にbaselineからx-heightという「高さ」もあったりして、その(Web)フォントがどういう作りになっているかによって、問題とされているような現象は出るので、あくまで個々に調整するのが手っ取り早いと思います。
baselineやx-heightは、https://app.codegrid.net/entry/inline-layout-1 の後半で説明があります。

「vw」「vh」「rem」をつかって、すでに回答したような方法でline-heightやpadding等を調整すれば対応可能です。

ただ、ちょっと気になる表現として「空白が出来ない」と言われているのは、あくまで「空白が出来ない」ようにあなたが調整するのであって、「vw」「vh」「rem」を使えば自動的に空白ができなくなるわけではないということは伝わっていますよね？
そのあたりも、上記URLが参考になるかもですが。

[makoto]

> 下記の認識でよろしいでしょうか？
> ＊％は親要素の何％かに対して上記はビューポートに対して、（表示画面に対して）何%と計算する。
> １VWは、画面サイズの1%となる。

おそらく正しく理解されているように思われます。
ただ、ちょっと乱暴すぎたので、もう少し補足しておきますと「vw」「vh」はline-heightには使えません。たしか。
なので「rem」も併用するか、すべてを「rem」としておいた上で、JavaScriptの初期処理でビューポートからhtml要素のfont-sizeを決めるといったことも必要です。

２年以上前、かつiOSとモダンブラウザのみのパイロット版実装で、(そのときはremではなく)emと、JavaScript併用で、かなり複雑なレイアウトを縦横可変にしたことがあります。

[退会済みユーザー]

ハイレベルですね。参考先を後ほどはいけんさせていただきます。
ありがとうございます。

[退会済みユーザー]

リンク先を見ました。

ine-height: 0.８;/* メインイメージとの行間 */を下記のようにした所、行間がなくなり、アイコンの上下の隙間がなくなりました。
ine-height: 0.5;/* メインイメージとの行間 */

.top-gnav__top-ul li {
display: inline-block;
width: 18.7%;
line-height: 0.5;/* メインイメージとの行間 */
text-align: center;
}

ありがとうございます。

ただ、新たな問題が発生しました。
上部の隙間は、マージンなどで調整すればよいと思いますが、
アイコンとotherという文字の間も、行間がなくなってしまいました。
原理としては当たり前なのはわかりましたが、下部だけ隙間を作るには、ラインハイトは無しにして、アイコンにマージンをつけて、隙間を空ければよいのですね。

Answer 2

1. フォントをダウンロードして置く。

2. CSSでフォントファミリを登録する。

@font-face {
font-family: -regular;
src: url('Mono Social Icons-regular.ttf') format("Mono Social Icons");
}
3. 各要素でフォントファミリを指定する。

<h1 style="font-family: Mono Social Icons-regular;">SAMPLE TEXT</h1> だけ。

IE対応

IEはいつもの様に特殊でフォントの形式を MS 独自の EOT にしなければいけない。 そのかわり IE6 でも使える。
TTF->EOT 変換は以下のサービスでできる。

http://ttf2eot.sebastiankippe.com/
その他

日本語のTTFファイルは小さくても 1MByte 程度あるので回線が細いと重い。 ２回目以降はキャッシュが効く。