The font-weight property in CSS is used to specify the thickness or boldness of text. It’s a crucial property for defining the visual weight of text and can significantly impact the readability and style of a web page.
Values for font-weight
1. Keyword Values
· normal: This is the default value, equivalent to font-weight: 400.
· bold: This value makes the text bold, equivalent to font-weight: 700.
· bolder: This value makes the text bolder than its parent element.
· lighter: This value makes the text lighter than its parent element.
2. Numeric Values
The numeric values range from 100 to 900 in increments of 100. These values specify the weight of the font:
· 100: Thin
· 200: Extra Light (Ultra Light)
· 300: Light
· 400: Normal (Regular)
· 500: Medium
· 600: Semi Bold (Demi Bold)
· 700: Bold
· 800: Extra Bold (Ultra Bold)
· 900: Black (Heavy)
Not all fonts support all numeric values. The exact appearance will depend on the available weights in the font-family being used.
The effect of the font-weight property depends on the font family used. For example, some fonts have only normal and bold weights, while others have a full range of weights. When a specific weight is not available, browsers typically use the closest available weight.
fontWeight.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Font-Weight Property Examples</title> <style> body { font-family: Arial, sans-serif; line-height: 1.6; padding: 20px; } /* Keyword Values */ .normal { font-weight: normal; } .bold { font-weight: bold; } .bolder { font-weight: bolder; } .lighter { font-weight: lighter; } /* Numeric Values */ .weight-100 { font-weight: 100; } .weight-200 { font-weight: 200; } .weight-300 { font-weight: 300; } .weight-400 { font-weight: 400; } .weight-500 { font-weight: 500; } .weight-600 { font-weight: 600; } .weight-700 { font-weight: 700; } .weight-800 { font-weight: 800; } .weight-900 { font-weight: 900; } /* Example sections */ h2 { margin-top: 30px; border-bottom: 2px solid #333; padding-bottom: 5px; } p { margin: 10px 0; } </style> </head> <body> <h1>CSS Font-Weight Property Examples</h1> <h2>Keyword Values</h2> <p class="normal">This text is using <strong>font-weight: normal;</strong> (Default weight).</p> <p class="bold">This text is using <strong>font-weight: bold;</strong>.</p> <p class="bolder">This text is using <strong>font-weight: bolder;</strong>.</p> <p class="lighter">This text is using <strong>font-weight: lighter;</strong>.</p> <h2>Numeric Values</h2> <p class="weight-100">This text is using <strong>font-weight: 100;</strong> (Thin).</p> <p class="weight-200">This text is using <strong>font-weight: 200;</strong> (Extra Light).</p> <p class="weight-300">This text is using <strong>font-weight: 300;</strong> (Light).</p> <p class="weight-400">This text is using <strong>font-weight: 400;</strong> (Normal).</p> <p class="weight-500">This text is using <strong>font-weight: 500;</strong> (Medium).</p> <p class="weight-600">This text is using <strong>font-weight: 600;</strong> (Semi Bold).</p> <p class="weight-700">This text is using <strong>font-weight: 700;</strong> (Bold).</p> <p class="weight-800">This text is using <strong>font-weight: 800;</strong> (Extra Bold).</p> <p class="weight-900">This text is using <strong>font-weight: 900;</strong> (Black/Heavy).</p> </body> </html>
No comments:
Post a Comment