I've the following code:
p{
font-family: Helvetica, Arial, sans-serif;
font-weight:100;}
It works on Mac OSX on Safari and Firefox, but the font-weight don't work on Windows in any browser. Why? How can I solve that?
2 Answers
From the Mozilla Developer Network CSS docs for font-weight:
"If the exact weight given is unavailable, then 600-900 use the closest available darker weight (or, if there is none, the closest available lighter weight), and 100-500 use the closest available lighter weight (or, if there is none, the closest available darker weight). This means that for fonts that provide only normal and bold, 100-500 are normal, and 600-900 are bold."
You don't see a lighter weight on Windows because there isn't one for Arial, so it falls back on a normal weight instead.
-
Ah ok, so should I change font? But, what font?– user8090Commented Jun 8, 2011 at 12:26
-
If you want fine grain control of font weight across platforms, you're best using a font hosting service like Typekit, then picking one of theirs. e.g. P22 Underground has support for thin, light, book, medium, demi, and heavy weights. Most Web safe system fonts only have book and demi, so you won't get the control you want with those. Google webfonts also offers cross-platform font support with weight variants.– NickCommented Jun 8, 2011 at 12:34
According to a comment at the Sitepoint CSS reference page for font-weight there are at least IE issues on Windows:
I would argue that none of the browsers listed support font-weight to a 'full' standard, as none support the numerical scale. Currently only Firefox 3 and Webkit nightlies support numbers as values of font-weight.
Now that comment is a 2 1/2 years old so it may not be applicable today.
I would recommend trying to set the value to "lighter" and see what happens.
answered Jun 7, 2011 at 18:02
