How to reduce font weight in Firefox on Mac with C

问题:

Here's my problem: I'm using font-face for the menu of my website, but Firefox on Mac displays it too bold On a PC, everything works well, the font is perfectly sized and looks like it should

Unfortunatly, on Mac, i have to had a CSS hack for Safari (which works), but I didn't find anything similiar in Firefox.

I've tried the "text-shadow hack", i tried using the font-weight property (which pretty much doesn't do anything).

And now, some code!

@font-face {
    font-family: 'KnockoutHTF48FeatherweightRg';
    src: url('font/knockout-htf48-featherweight-webfont.eot');
    src: url('font/knockout-htf48-featherweight-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/knockout-htf48-featherweight-webfont.woff') format('woff'),
         url('font/knockout-htf48-featherweight-webfont.ttf') format('truetype'),
         url('font/knockout-htf48-featherweight-webfont.svg#KnockoutHTF48FeatherweightRg')     format('svg');
    font-weight: normal;
    font-style: normal;

}

For Safari:

body{
    ...
    -webkit-font-smoothing: antialiased;
}

Left if FF on Mac and right is FF on PC (the good version) Screenshot http://i44.tinypic.com/ehm72a.jpg

Thanks!

回答1:

FireFox posted a resolution to this today on their bug forum. It was just finalized today so won't be in use for a while, but we should all put

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

in our body tag to reset this for all browsers. FINALLY!! man, that made my day! This should come out in the next FF release.

thread here https://bugzilla.mozilla.org/show_bug.cgi?id=857142

回答2:

you can use,

font-weight:normal !important;

for fix the visualization error on firefox Mac.

回答3:

There is trick explained http://dave-bond.com/css/font-too-bold-on-a-mac/ basically is to apply opacity: 0.99; to those texts...

回答4:

This affects firefox browser ONLY.

@-moz-document url-prefix() {
  .classname {
    font-weight:normal;

    /* or any other option */
  }
}

Enjoy!

回答5:

Every font supports different weights. Some can be really thing, others can't.

Mac and PC will render the same font differently. It's a core operating system thing, and basically, there's nothing you can do about it. :(

Most consistent results can be achieved using something like Google Webfonts or TypeKit.

One of the thinnest fonts standard on Mac is Helvetica Neue.

Also worth noting that font-weight supports values 100,200,...800,900.

回答6:

I've found that making a slightly "lighter" version of the icons is the best way to compensate for this. They're passable in Firefox, and ever-so-slightly lighter in all other browsers. In Illustrator, I create a 16px icon. I resize it to 1024px, and apply an offset path of -6px (these are the numbers that worked best for me). I then export that as a svg, and import it into IcoMoon to build the icon-font. I don't use -webkit-font-smoothing:antialiased (or the pending -moz-osx-font-smoothing: grayscale) unless it's a light icon over a dark background. This is the best way I've found to get icon-fonts to display (mostly) uniformly across browsers & platforms.

回答7:

Found this on CSS Tricks and this freaking works.

add this to the stylesheet: -moz-osx-font-smoothing: grayscale;