CSSのフォントの組み込みを無視する方法

OTF形式とWOFFの2種類のフォントファイルセットが用意されています。残念ながら、それらのうちの1つは、異なるオペレーティングシステムで異なってレンダリングされているように見えます。次のコードとキャプチャは、問題を示していますCSSのフォントの組み込みを無視する方法

CSS：

div { float:left; padding:0; margin:0 10px; color:#fff; font-size:25px; } 
.galano { background-color:#1a2; font-family: 'Galano Grotesque'; } 
.coves { background-color:#21a; font-family: 'Coves'; }

HTML：

キャプチャオペレーティングシステムから：

<body> 
    <div class="galano">padding:0</div> 
    <div class="coves" >padding:0</div> 
</body>

キャプチャオペレーティングシステム1から2：

緑色の背景を持つフォントが必要以上にかなり高い要素を作る大きな固有のパディングを含めるように思われる方法に注意してください。さまざまなフォントで要素を整列させるときに余分なスペースを考慮することでそれを実現することができますが、残念ながら境界ボックス内のテキストの位置はオペレーティングシステムによって異なりますので、それぞれに固有の調整が必要ですオペレーティング·システム。

1つのオプション私は可能な限り条件付きCSSを意味しますので、私の質問は次のとおりです：フォントの組み込みパディングを無視するCSSプロパティを使用できますか？グリフ）を使用して、オペレーティングシステム間で一貫して自分のパディングを適用することができますか？

ありがとうございます！

出典

2016-09-01 Carvo Loco

どのように生成されたのですか？別のブラウザやOSで異なるフォーマット（WOFF2、WOFF、TTF、SVG、EOT？）をロードしていますか？それがオプションの場合は、フォントデザイナーに大きな問題があると教えてください。 – FelipeAls

hmmm良い質問。パディングについては不明ですが、 'letter-spacing：' – Roysh

Thanks @FelipeAlsを使用して文字間隔で再生したいことがあります。私はフォントがどこから来たのかわからない、私はパンフレットのデザイナーによって与えられたが、彼は彼が使用したフォントを設計したとは思わない。 Chrome、FF、IE 11、Safari for Windows、Chrome、Safari for Mac、アンドロイドのデフォルトブラウザでOTFまたはWOFFファイルのみを使用しようとしました。結果は、ブラウザに関連するよりもOSに関連しているようです。 –

OSよりもブラウザの不整合があるかもしれません。線の高さを正規化しましたか？例えば。

div { 
    float: left; 
    padding: 0; 
    margin: 0 10px; 
    color: #fff; 
    font-size: 25px; 
    /* Over here! */ 
    line-height: 1.2; 
}

出典

2016-09-01 09:15:17

貴重なアイデアをありがとう、Bram。残念ながら、行の高さを設定すると境界ボックスの高さを定義できますが、境界ボックス内のテキストのレイアウトはOSによって異なります。テキストは、利用可能な領域の中心に垂直に描画され、もう一方は、下端に近づくように描画されます。結果はブラウザに関係なく、OSに関係しているように見えます（私は1つのOSで異なるブラウザを試してから、別のOSで2つ試しました）。手動で行の高さを最低限必要な値に設定してから、パディングを適用できると思います。メンテナンスの悪夢！ :-( –

CSSのフォントの組み込みを無視する方法

答えて

関連する問題