CSS (Cascading Style Sheets) provides a variety of options for styling fonts on web pages. You can control the font family, size, weight, style, and other aspects of text rendering using CSS font properties. Here are some key CSS font properties and their usage:
- font-family: This property specifies the font family or list of font families to be used for text. You can provide multiple font names separated by commas, indicating a fallback mechanism if the desired font is not available. For example:
font-family: Arial, sans-serif;
In this case, the browser will attempt to render the text in Arial, and if Arial is not available, it will fall back to a generic sans-serif font.
- font-size: This property sets the size of the font. You can use various units such as pixels (px), percentages (%), or relative units like em or rem. For example:
- font-weight: This property determines the thickness or boldness of the font. Common values include normal, bold, lighter, and bolder. Numeric values like 100, 200, …, 900 are also accepted, representing different levels of thickness. For example:
- font-style: This property controls the style of the font, such as normal, italic, or oblique. For example:
- font-variant: This property specifies whether the text should be displayed in a small-caps variant. For example:
- font-stretch: This property allows you to expand or condense the width of the font. Values can be normal, condensed, or expanded. For example:
These are just a few examples of CSS font properties. There are additional properties like line-height, letter-spacing, text-transform, etc., that can further enhance your typography. It’s important to note that the availability of specific fonts and their styles can vary across different browsers and devices, so it’s a good practice to include a fallback font stack to ensure consistent rendering.