Resolve FontAwesome text rendering differences

 

在这里输入图像描述

Please see the above image. I'm using the icon font 'FontAwesome' on my website. In the website header, I'm using them for navigation icons. Each of these icons are links, that have the 'fa' and 'fa-2x' classes attached.

I'm not overruling any default font sizes or rendering modes for FontAwesome, so this is a clean state. All screenshots are from Windows 8.1, testing several browsers. Here are my findings:

  • Firefox: perfect rendering, optimal balance between legibility and anti-aliasing
  • Chrome: font rendering too thick and harsh, hurting legibility
  • Safari: reasonable legibility, yet a bit too thin and harsh
  • IE10: Very close to FF, acceptable as-is
  • Opera: Same as Safari

    • Mu ultimate goal would be to have ideal rendering across browsers, as per the Firefox example. A perhaps more realistic goal is to beat Chrome into submission, as it presents the biggest issue.

    Font-Awesome by default has this applied: 

    -webkit-font-smoothing: antialiased;

    I've tried setting this to the other text rendering modes, yet none seem to make a meaningful difference, the same is true for setting the text-stroke property, even at 0 the 'thickness' problem remains. That problem is best seen from the 'members' icon.

    You can see the rendering live at www.jungledragon.com

    Any clues/tips on how to improve rendering quality and consistency?

    That's old issue I can see, but I had similar problem with FontAwesome and discovered that weight of these icons can be different depending on font-weight attribute (that's a font, after all).

    So, my problem was that narrow holes in icons becomeing invisible in my app and the solution was setting the font-weight attribute to normal in CSS.

    For my liking, icons in Chrome version of your issue are just "overweighted" that way.

    链接地址: http://www.djcxy.com/p/93476.html

    上一篇: 为什么这些字体不会跨服务器加载？

    下一篇: 解决FontAwesome文本渲染的差异