web-dev-qa-db-ja.com

アイコンフォント（Font Awesome）を使用すると、少しぼやけて太すぎます

私はFont Awesomeを使用して自分のサイトにアイコンを作成しています。アイコンは、Retinaディスプレイ搭載のiPod Touchで見栄えがしますが、iMacでは少しぼやけていてはっきりしていません。

ここに示す画像があります：

enter image description here

ご覧のように、フォントはRetinaディスプレイのiPod Touchでは本当に見栄えがよく鮮明ですが、iMacでは、このフォントはひどいものです。

これは何が原因ですか？これはアンチエイリアスと関係がありますか？これについて私ができることはありますか？

cssfontsfont-awesome
23
shrewdbeans

このような問題は、アンチエイリアスやヒントに関連している可能性があります。フォントは、小さいサイズで見栄えを良くしたい場合、何らかのグリッドに配置する必要があります。 GitHubの連中は、カスタムフォントの清潔さをどのように管理したかについて、すばらしい ブログ投稿 を書いています。

私はそれをグリッド上に配置して、GitHubの人々の足跡をたどろうとしました。彼らは彼らのアイコンで良い仕事をしました。

また、iPod TouchとiMacではアイコンの数値のサイズが異なりますか、それともDPI設定の違いによる副作用ですか？これは、フォントのレンダリングに関する問題かもしれません。

可能であれば、DPI設定を試してください。私はMacを使用していないので、Macでこれらの設定を変更する方法がわかりません。ただし、それでも根本的なグリッドの問題は修正されません。問題のフォントを編集できますか？

21
user1519537

@sporkboxの回答に加えて、特にWebkitブラウザーに関心がある場合は、使用することを選択できる次のCSSオプションがあります。

font-smooth: auto | never | always | <absolute-size> | length | initial | inherit
-webkit-font-smoothing : none | subpixel-antialiased | antialiased
13
Alexander Chen

一部のブラウザーは、太字の太さがない場合に太い線を太くして太字のフォントをエミュレートしようとするため、そのような状況になります。これはfont-weight: normal;のどこかに表示されますか？

5
gterez

最適なクロスブラウザソリューションは次のとおりです。

.your_font_class{
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
2
Marco Allori

いつかうまくいく奇妙なトリックがあります、試してください：

-webkit-transform:rotateZ(0);
-moz-transform:rotateZ(0);
-o-transform:rotateZ(0);
transform:rotateZ(0);

ブロックが中央に配置されている場合は、左オフセットが整数かどうかを確認してください。 JavaScriptを使用して、それをチェックして修正できます。よろしければお手伝いします。

2
Paulo Rodrigues

-webkit-perspective：1000;

私のために修正しました

1
Ben Taliadoros

ちょっと前に述べた解決策のいくつかはトリックを行いましたが、私のためにそれを修正したのは、font-awesome.css（およびfont-awesome.min.css）内の「fa」クラスのフォントサイズ継承を削除（コメントアウト）することでした。 ：

font-size: inherit;

クラスの最終結果は次のようになります。

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  /* font-size: inherit; */
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

これに加えて、「fa-lg」クラスからこの行をコメントアウトすると、アイコンが押し下げられすぎたため、大きなアイコンを調整する必要がありました。

vertical-align:-15%

クラスはこのようになります

.fa-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  /* vertical-align: -15%; */
}

Font Awesome 4.7.0を使用しています

1
phoenix

CSSフォントスムージングを使用：

-webkit-font-smoothing: antialiased;
0
Kinglybird