font-weight: bolder
This CSS declaration is supposed to render the text it is applied to in a font darker than the inherited font. However, this declaration gives different results in each of the major browsers. Example: <p style="font-weight: 300">The quick brown fox jumps over the <span style="font-weight:bolder">lazy dog</span></p>Firefox 3
Firefox 3 darkens the text by using the next heavier font available in the typeface. For example, if a typeface contains a font of weight 100 and a font of weight 400, the CSS declarationfont-weight: bolder when applied to text of weight 100, will result in the text having a font weight of 400.Opera 9.6
The CSS declarationfont-weight:bolder in Opera 9.6 increases the font weight by one step (i.e. text of inherited weight 100 is made 200; text of inherited weight 200 is made 400, and so on). Since a typeface does not always have all the nine possible font weights, using font-weight: bolder in Opera 9.6 does not always result in darker text.Internet Explorer 6 and Internet Explorer 7
Internet Explorer 6 and 7 darkenfont-weight:bolder text by using the next heavier font available in the typeface. However, Internet Explorer 6 and 7 also make each font weight's bolder text darker than the previous font weight's bolder text.
For example, the OpenType typeface Lindau has six weights:- 300
- 400
- 500
- 600
- 800
- 900
font-weight:bolder with the Lindau typeface.| inherited weight | font-weight:bolder |
|---|---|
| 100 | 400 |
| 200 | 500 |
| 300 | simulated 600 |
| 400 | 600 (real) |
| 500 | 800 |
| 600 | 900 |
| 700 | 900 |
| 800 | 900 |
| 900 | 900 |
font-weight:600 — instead of using the appropriate font from the typeface, these browsers attempt to simulate it resulting in a kind of pseudo-600 text.Safari 3.2
Safari 3.2 only renders the weights normal (400) and bold (700). Therefore,font-weight:bolder always results in boldface text.font-weight:lighter
This CSS declaration is supposed to render the text it is applied to in a font lighter than the inherited font. However, this declaration gives different results in each of the major browsers.Example:
<p style="font-weight: 600">The quick brown fox jumps over the <span style="font-weight:lighter">lazy dog</span></p>Firefox 3
Firefox 3 lightens the text by using the next lighter font available in the typeface. For example, if a typeface contains a font of weight 600 and a font of weight 400, the CSS declarationfont-weight: lighter when applied to text of weight 600, will result in the text having a font weight of 400.Opera 9.6
Opera 9.6, like Firefox 3, lightens the text by using the next lighter font available in the typeface. For example, if a typeface contains a font of weight 600 and a font of weight 400, the CSS declarationfont-weight: lighter when applied to text of weight 600, will result in the text having a font weight of 400.Internet Explorer 6 and Internet Explorer 7
When the CSS declarationfont-weight:lighter is applied to text whose weight is 100, 200, 300, 400, 500 and 600, Internet Explorer 6 and 7 use fonts that are lighter than normal (400-weight) font. For example, in a typeface that contains all the 9 weights, font-weight:lighter will turn 600-weight text to 300, 500-weight text to 300, 400-weight text to 300, 300-weight text to 200, 200-weight text to 100. 100-weight text will remain the same.When the CSS declaration
font-weight:lighter is applied to text whose weight is 700, 800 and 900, Internet Explorer 6 and 7 use fonts that are lighter than boldface. For example, in a typeface that contains all the 9 weights, font-weight:lighter will turn 900 to simulated 600, 800 to 500 and 700 to 400.Safari 3.2
Safari 3.2 only renders the weights normal (400) and bold (700). Therefore,font-weight:lighter always results in normal(400-weight) text.Conclusion
Since each browser handlesfont-weight:bolder and font-weight:lighter differently, and because the default typefaces available in Windows don't have multiple weights, this CSS declaration must be avoided.
No comments:
Post a Comment