1

編集* 最初のコメントに基づいて、私の問題は、私のアプローチにフォントヒントがないことだと思います。ベクター ソフトウェアを使用して作成されたアイコン フォントにアプローチして、フォント ヒンティング (または不足) の問題を解決する方法を知っている人はいますか? 助けてください！

アイコンに使用するフォントを作成しています (画像を使用するよりもはるかに柔軟で効率的です)。ただし、一部のアイコンが歪んでしまい、その理由がわかりません。非常に単純なアイコンでさえ、これを行っています。おそらくそれは私のアプローチの何かだと思います。これが私がすることです：

  1. Inkscape - 960px x 960px のベクター アイコンを作成
  2. ページの中央に配置し、フォント エディターを使用して新しいグリフを作成します。
  3. freefontconverter.com を使用して .ttf ファイルを作成します。
  4. .ttf ファイルを取得し、www.fontsquirrel.com/fontface/generator を使用して他のさまざまなファイル タイプ (svg、eot、wof、svg、ttf) に変換します。カーニングの削除とカスタム サブセット (英字のみ) を除くすべての標準オプション
  5. 私のcssスタイルシートで次のコードを使用してください（私はコードを思いつきませんでした。どこかで見つけたガイドを使用してください。それは私のブックマークのどこかにあると思います）：
@font-face {
  font-family: 'iconFont';
  src: url('iconfont-webfont.eot');
  src: url('iconfont-webfont.eot?#iefix') format('embedded-opentype'),
       url('iconfont-webfont.svg#iconFont') format('svg'),
       url('iconfont-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.iconFont {
  display:inline-block;
  font-family:'IconFont';
}

最初は古い、粗悪なモニターだと思っていましたが、新しいモニターを手に入れたばかりで、まだ起こります。一部のアイコンの端がギザギザになったり、歪んだりすることがあります。シンプルなアイコンでも効果があります。たとえば、正方形の境界線を持つカレンダー アイコン...下の境界線は、何らかの理由で側面の境界線の 2 倍の太さです。そして、目立たないものでも、画像アイコンのように鮮明ではありません。しかし、テキストのフォントがくっきりしているので、それはわかりません...何か間違ったことをしているに違いありませんか?

どんな助けでも大歓迎です。ありがとう！

誰かが私が間違っている場所を特定するのを助けることができれば、それは大歓迎です. ありがとう！

4

0 に答える 0