This example demonstrates how to set the boldness of a font:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
p.normal { font-weight: normal; } p.light { font-weight: lighter; } p.thick { font-weight: bold; } p.thicker { font-weight: 900; } </style> <body> <p class="normal">This is a normal paragraph (a font-weight of 400 or 500)</p> <p class="light">This is a light paragraph (a font-weight of 100 to 300)</p> <p class="thick">This is a thick paragraph (a font-weight of 600 or 700)</p> <p class="thicker">This is a thicker paragraph.(a font-weight of 800 or 900)</p> </body> |
This is a normal paragraph (a font-weight of 400 or 500) This is a light paragraph (a font-weight of 100 to 300) This is a thick paragraph (a font-weight of 600 or 700) This is a thicker paragraph.(a font-weight of 800 or 900) |
The numerical values are 100 to 900 in increments of 100, 100 is the lightest while 900 is the boldest. You cannot use a value less than 100, a number like 575, nor a value over 900. Various fonts have "available" numerical values -- and browsers will use the nearest available value to whatever you specify. For example, Arial, Helvetica, and Georgia only use 400 and 700, so if you type 600, it will display 700.
