I really have scoured Google for a similar question and found nothing, which confuses me.
Anyway, on this http://dev.subv开发者_运维百科erb.net/index.php
The menu writing is different thicknesses across the two browsers. It is the same in both when the font-weight is reduced to 500, but when it is 600 it is what I want in firefox but noticeably thicker in Chrome. This also breaks my design.
I just can't figure out what this might be...any ideas?
You can't rely on font-width consistency. It's not just across browsers that it differs, but it also differs considerably across operating systems. Instead you have to create your designs to allow for some leeway in font width.
For slightly better consistency, try using html 5 @font-face, which is now impemented across all modern browsers. But even then, width can't be gauranteed -- that will just guarantee that at least the font defintion is the same.
Finally, you could use images for perfect consistency, but that is strongly discouraged. It's better to just allow some wiggle room in your designs.
Don't use the numeric values of font-weight
. They aren't useful for picking multiple weights of a font family because:
- browser support is poor and inconsistent
- font support (describing their weights as part of a complete family) is poor
- none of the built-in OS fonts you'll use in your
font-family:
rules have extra weights other than normal and bold anyway.
font-weight: 600
has long been problematic. Both Opera and Chrome appear to use synthetically-created bold fonts on weight 600, rather than the genuine bold font variant that is used from weight 700 up. (Synthetic fonts are usually used when bold or italic is requested on a family that doesn't have a bold/italic variant.) In addition, on Firefox/OSX, 600
used to be taken as normal
.
The correct weight value that aligns with bold
is 700
. Better just stick with the plain normal
and bold
values.
Incidentally, you've also got a font-family mis-spelling (san-serif
should be sans-serif
).
精彩评论