1

FontForge で作成しているカスタム アイコン フォントがあります。HTML ではブロック レベル要素の高さが変更されるが、Chrome では変更されないという点で、私は異常な現象を経験しています。

例：

<html>
    <head>
        <style>
            html { font-family: Arial, Helvetica, sans-serif; }
            .double { font-size: 200%; }
            div { margin-bottom: 1.5em; }

            @font-face {
                font-family: iconfont;
                src: url('http://cheesefish.net/techchoicesymbol-webfont.eot');
                src: url('http://cheesefish.net/techchoicesymbol-webfont.eot?#iefix') format('embedded-opentype'),
                     url('http://cheesefish.net/techchoicesymbol-webfont.woff') format('woff'),
                     url('http://cheesefish.net/techchoicesymbol-webfont.ttf') format('truetype'),
                     url('http://cheesefish.net/techchoicesymbol-webfont.svg#techchoicesymbolmedium') format('svg');
                font-weight: normal;
                font-style: normal;
            }

            .action {
                display: inline-block;
                line-height: 1.5;
                background-color: orange;
                padding: 0 0.5em;
            }

            .iconfont { font-family: iconfont; }
        </style>
    </head>
    <body>
        <div>
            <span class="action"><span class="iconfont">&#xE013;</span> Go for a drive</span>
            <span class="action">&#x2603; Have a snowman</span>
        </div>

        <div class="double">
            <span class="action"><span class="iconfont">&#xE013;</span> Go for a drive</span>
            <span class="action">&#x2603; Have a snowman</span>
        </div>
    </body>
</html>

ライブ: http://jsfiddle.net/aGHxw/2/ またはhttp://cheesefish.net/symbol-test.html (ブラウザーが CORS をサポートしていない場合)

(注: 2 倍のサイズのボタンが横に並ぶように、結果ペインの幅が十分であることを確認してください)。

ご覧のとおり、各黄色のボタンには明示的に 1.5 の行の高さが指定されています。これは、フォント内の奇妙なメトリックをオーバーライドする必要があり、実際に Chrome ではオーバーライドされます。コンテンツの高さは 24 ピクセル (2x サイズのボタンの場合は高さ 48 ピクセル) です。

しかし、Firefox と IE の両方で、結果はわずかに異なります。Firefox では、カスタム Web フォントを含むボタンが高さ 25 ピクセル (2 倍のサイズのボタンの場合は高さ 49 ピクセル) に拡大されます。IE ではサイズは問題ありませんが、2 倍のサイズのボタンの場合、私のフォントのボタンは 1 ピクセル上にオフセットされます。

このフォントには、少し奇妙な垂直メトリックがいくつかあります。一部のグリフは高さ 1.5em (ベースラインより下に 0.375em、上に 1.125em 拡張) です。上昇は 1024 (em は 1024 単位) で、下降は 0 です。OS/2 テーブルでは、すべての上昇と下降は、最大のグリフ (アセント 1152 およびディセント -384、または 'Win Descent' の場合は +384)。

私はひどいことをしていますか？このフォントを FontSquirrel @font-face ジェネレーターで実行しました。上記のサンプルに表示されている結果は、「垂直メトリックの修正」がオフになっています。その設定をオンにすると、同様に奇妙ですが、異なる結果が得られます。

4

3 に答える 3

0

金属活字の場合、ポイント サイズは、文字が立ち上がる金属体の高さとして測定されます。このコンセプトをデジタル化しました。
ブラウザーは、ベースラインによって同じテキスト行のフォントを揃えます。ただし、ボディの文字形状の位置は異なります。これは、x の高さ、上昇、下降の変化に関係しています。

2 つのブロック レベル要素の高さが異なる理由:

  • 車は @font-face フォントから来ています。
  • 雪だるまは @font-face フォントでは使用できないため、デフォルトのブラウザ フォントから取得されます。
  • フォントが違う！したがって、X 高さ、上昇率、下降率が異なります。

体と輪郭の位置の変化の証拠として私のフィドルを見てください。JS:

* {
    font-size: 48px;
}
@font-face {
    font-family: iconfont;
    src: url('http://cheesefish.net/techchoicesymbol-webfont.ttf') format('truetype');
}
span {
    background-color: gray;
    color: white;
}
.iconfont {
    font-family: iconfont;
}
.arial {
    font-family: Arial;
}
.times {
    font-family: Times;
}
.helvetica {
    font-family: Helvetica;
}

HTML:

<!-- All fonts are 48px but still have diffrent body size. -->
<!-- Iconfont doens't have a-z, A-Z, 0-9 but does display a snowman! :/ -->
<span class="iconfont">&#xE013; a-z, A-Z, 0-9 &#x2603;</span>

<span class="arial">Hx</span> 
<span class="times">Hx</span>

<span class="helvetica">Hx</span> 
<!-- Snowman isn't an iconfont glyph. -->
&#x2603;

クロム：

Chrome のスクリーンショット

ファイアフォックス:

ファイアフォックスのスクリーンショット

いくつかの値が間違っているため、あなたの車は大きくなっています。FontForge で新しいフォントを作成する場合、デフォルト値は em 1000、ascent、800、descent 200 です。

FontForge フォント情報ダイアログ

マイナーなこと: 車は正しい Unicode スロットにありません。しかし、私用エリアのどこかに。AUTOMOBILE (U+1F697) にあるはずです。

結論: フォントの本体が異なります。フォントはベースラインで揃えられているので問題ありません。アイコンが font-world に入ると、それは文字のように動作し、適切なベースライン位置、x 高さ、上昇と下降を持っている必要があります。

于 2013-09-27T22:38:23.983 に答える
0

階段のスケーリングが発生していると思います：

テキストが拡大または縮小されると、ブラウザはテキストの最終的なサイズ (指定されたフォント サイズと適用されたスケール) を計算し、その計算されたサイズのフォントをプラットフォームのフォント システムから要求します。ただし、たとえば、140% のスケールで 9 のフォント サイズを要求すると、結果のフォント サイズ 12.6 はフォント システムに明示的に存在しないため、ブラウザーは代わりにフォント サイズを 12 に丸めます。これにより、テキストが階段状にスケーリングされます。

ソース: https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering

修正として、スタイルシートに追加できtext-rendering: geometricPrecision;ます。

于 2013-09-24T16:17:17.840 に答える