17

Web Designer Depotおよびintrideaの記事を出発点として、独自の Web フォントを作成しています。

さまざまなエンジンがフォントを異なる方法でレンダリングすることは知っていますが、私が抱えている問題は、Firefox がクロムよりも高いフォントをレンダリングすることです - フォントを表示しているサイズでは、これは非常に目立ちます (3 または 4 ピクセル - ボタン上でそれらを意味します)。完全にずれています）。

Github の octicon ドキュメントも参照しました。私が見る限り、目立った違いはありません。彼らはどのようにしてこれを達成したのですか？

私はinkscapeを使用しており、いくつかの異なるsvgスターターテンプレートを試しました。セットアップはSet width: 1024さまざまなサイズのアイコンを試してみましたが、結果は変わりませんでした。つまり、512pt の正方形で、ベースラインのすぐ下に配置されます。

私の質問は、Web フォントを作成するときに、ブラウザーでのフォントのレンダリングの違いを最小限に抑えるために、どのような規則を実装する必要があるかということです。

4

4 に答える 4

14

これは、垂直メトリックと呼ばれるものが関係する複雑な質問です。フォントには、これらの 3 つのセットがあります。「hhea」テーブルにある最初のセットは、一般的に Mac に固有のものです。「OS/2」表にある他の 2 つのセットは、Windows (および Linux) に関連しています。アイデアは、これらの値を均等にすることです。私たちのジェネレーターには、奇妙なことに「Fix Vertical Metrics」と呼ばれる機能があり、これらを最適に推測します。Github は Generator を使用してアイコンを完成させたことに注意してください。

これが SVG フォントに特に関係していないことはわかっていますが、これが問題の原因であると確信しています。異なる垂直メトリック値を持つことは、プラットフォーム間でベースラインを台無しにします。

いくつかの読書：

于 2012-07-28T01:30:10.633 に答える
3

ウェブアプリ icomoon があります: http://icomoon.io/app/

これで作業はかなりうまくいきますが、さまざまなアイコンのレンダリングをテストする必要があります。

すべてをデザインしたくない場合は、多くのアイコンを提供します。

于 2012-11-20T05:00:30.867 に答える
0

Icomoon アプリを使用して絵文字アイコン フォントを作成したり、プロジェクトごとにカスタム アイコン フォントを作成したりしました。

Icomoon アプリでは、次の各操作を行うことができます。

  • いくつかの一般的なアイコン フォントから 1 つまたは複数のアイコンを取得します
  • アイコン フォントだけでなく、通常のフォントの場合もある他のフォントをアップロードします。
  • SVG ファイルをアップロードしてアイコンとして使用する
  • 利用可能な任意の数のフォントから任意の数のアイコンを組み合わせる
  • 必要な文字の UNICODE 16 進値を設定します
  • 作成したフォント セットをエクスポートおよび/または保存する

イコモーン

詳細については、「Unicode Supplementary Multilingual Plane シンボルを使用して Web フォントを作成する」を参照してください。

于 2014-12-18T10:53:10.647 に答える