経由でカスタム フォントを使用する@font-face
と、Chrome で必要と思われるとおりにレンダリングされます。ただし、Firefox では、追加のパディング (上下) がフォントに追加されます。
私にできることはありますか?
経由でカスタム フォントを使用する@font-face
と、Chrome で必要と思われるとおりにレンダリングされます。ただし、Firefox では、追加のパディング (上下) がフォントに追加されます。
私にできることはありますか?
参考までに、これはLinux上のFirefoxでも発生します(Chromiumでは発生しません)。FontForgeにフォントを読み込もうとしましたが、すぐに警告が表示されました。
フォント内の次のテーブルは、FontForgeによって無視されました
。「LTSH」線形しきい値テーブル
を無視します。「VDMX」垂直デバイスメトリックテーブル
を無視します。「hdmx」水平デバイスメトリックテーブルを無視します。
問題は、 VDMX(Vertical Device Metrics)テーブルに欠陥があることだと思います。
フォント全体をグリッドフィットして正しい高さを決定することを避けるために、VDMXテーブルが定義されています。
これはFirefoxで発生することとまったく同じように見えます。どこかで最小および最大の高さが誤って計算されています。これは、テキストを選択した場合にも明らかです。選択ボックスは、行の最上部と最下部まで拡張されます。要素に実際にパディングがある場合h1
は、線の上下と選択ボックスの間にギャップが表示されます。
また、検証により、ほぼすべてのグリフが「<ahref = "http://fontforge.sourceforge.net/problems.html"rel="noreferrer">極値の欠落点」であることが明らかになりました。
PostScriptとTrueTypeはどちらも、パスの最大値と最小値(極値)にポイントを設定する必要があります。
クイック検索は次のことを示しました。
私が抱えていた他の唯一の問題は、「極値での欠落点」と呼ばれるかなり厄介な状態でした。フォントの場合、グリフの左端、右端、上、下にポイント(またはInkscapeで呼ばれるノード)が必要です。通常、それらはグリフの作成方法のためにとにかくそこにありますが、端が丸い対角線はしばしば問題を引き起こします [ソース、画像を含む(下にスクロール)]
追加するだけです:
line-height:1;
あなたのCSSルールに