モバイルとデスクトップのCSS行の高さの属性の違い

Question

私のサイトのテキストロゴを作成しようとすると、この奇妙な状況に陥っています。http://geekket.co/

デスクトップのブラウザ（Firefox 51、Chrome 56、IE 11.576、Edge 38）ではロゴが完全に機能し、デザインドキュメントで指定されているように完全なピクセルに見えます。

モバイルでは、line-heightプロパティが正しく動作していないようです。 Operaはうまくレンダリングしますが、FirefoxとChromeは期待どおりに動作しません。私はまだ十分な評判を持っていないのでimgurアルバム

モバイルスクリーンショット：http://imgur.com/a/Ij3cF

これは、ロゴのその特定の部分に専用のCSSコードです：

#LogoGeek { 
    display: inline-block; 
    background-color: rgb(90, 186, 71); 
    font-family: "ForcedSquare"; 
    font-size: 90px; 
    line-height: .72; 
    height: .74em; 
    padding: 0 .05em 0 .12em; 
    vertical-align: middle; 
} 

「ForcedSquareは、」ウェブフォント我々ですサイトに追加されました。

私はMobile ChromeのRemote Dev Tools機能を使っていましたが、行の高さを.87に変更すると期待どおりに動作することがわかりましたが、私はそれがばかばかしいと感じています。

私が読んだ限り、それは特定のフォントの問題のようです。しかし、なぜデスクトップやオペラ・モバイルのすべてのブラウザには何の関係もないので、私は考えなければならない。

これを調整する方法や、すべてのブラウザで正しく機能させる方法がありますか？ ありがとうございました！

Answer 1

私はこの状況に対して2つの解決策を知っています。まず、行の高さの代わりにパディングを使用できることです。第二に、フォントのフォーマットを一つしか使用していないことです。 TTF、OTF、WOFFなどのすべての形式を使用する必要があります。あなたはw3schoolのページでもっと読むことができます。 Link for W3schools.com