Geek Answers Handbook

Firefox Font Overly Bold Anti-Aliasing Icon

I know that different browsers render text differently - and at some point I like it. However, experimenting with using icons for one project, Firefox, in particular, annoys me.

In fact, I have a number of social network icons that are displayed via @ font-face and some pseudo-classes. In addition to Firefox, there is a small problem with their rendering ...

Here they look like Chrome vs Firefox.

Chrome 23.0.1271.101 (Mac)

http://cl.ly/image/0M3t2S3N2A38/

(Perfect)

Firefox 17.0.1 (Mac)

http://cl.ly/image/053d2J0J312K

(Not so perfect)

You can probably see the problem that I have ...

I also checked several other browsers to make sure that it is not just firefox. This is just firefox. Even IE does a nicer job.

The code:

CSS

@font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot'); src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('fonts/icomoon.svg#icomoon') format('svg'), url('fonts/icomoon.woff') format('woff'), url('fonts/icomoon.ttf') format('truetype'); font-weight: normal; font-style: normal; } [class^="icon-"]:before, [class*=" icon-"]:before { font-family: 'icomoon'; font-style: normal; speak: none; font-weight: normal; line-height: 1; text-align: center; } .icon-flkr:before { content: "\2b"; } .icon-fbk:before { content: "\2c"; } .icon-twitter:before { content: "\3e"; } .icon-lfm:before { content: "\24"; } .icon-lkdin:before { content: "\25"; } .icon-inst:before { content: "\26"; }

HTML

 <ul id="footer_social_list" class="group"> <li><a href="#" class="icon-twitter" title="Follow me on Twitter"></a></li> <li><a href="#" class="icon-fbk"></a></li> <li><a href="#" class="icon-lkdin"></a></li> <li><a href="#" class="icon-flkr"></a></li> <li><a href="#" class="icon-inst"></a></li> <li><a href="#" class="icon-lfm"></a></li> </ul>

I have tried many things to try and fix this. Due to the change in opacity using CSS; to trying a text shadow; change weights of both @ font-face fonts, classes, and inherited styles; using the "data icon"; even making sure each icon is aligned on a pixel grid.

Nothing has made any improvements in Firefox yet, and I would say, with the exception of a slight exception to the Instagram icon in IE9, everything looks good in every browser.

So why does Firefox do this? And is there anything I can do to make him behave?

PS: I did not add -webkit-font-smoothing: antialiased; not that it affects Firefox anyway.

+6
source share
3 answers
 font-weight:normal !important;

This may seem like the obvious answer, but no one has mentioned it. It is very possible that you have !important on your anchor tags somewhere along the line, preventing them from weighing normally again.

0
source

This is another obvious answer that no one has mentioned:

What you're talking about happens in all browsers: when you use light text on a dark background, the text seems more "compelling." The same can be said about icon fonts ... small details are inflated. (There are CSS font smoothing and text rendering properties that help fix this, but they are not necessarily the same in all browsers. See here. )

One way you can get around this is if you want the darker icon on the lighter circle shape (without using SVG) to use the icon without the circle, and then create your own circle background using CSS.

You will not get a true knockout (the icons will not really be negative space in the circle, so any background images behind your buttons will not be displayed through the icons), but you will avoid light text, against a dark background of bleeding.

Of course, you will also lose your border radius in older versions of IE ... so weigh (um), which matters more.

0
source

More articles:


All Articles