CSS font-stretch
The CSS font-stretch property is used to control the width or condensedness of the characters in a font family. However, it is not widely supported by modern browsers and is considered non-standard, so it is not recommended for regular use in production websites.
The font-stretch property can take one of the following values:
normal: This is the default value, and it represents the standard width of the characters for the selected font family.ultra-condensed: The characters are significantly narrower than the standard width.extra-condensed: The characters are narrower than the standard width.condensed: The characters are moderately narrower than the standard width.semi-condensed: The characters are slightly narrower than the standard width.semi-expanded: The characters are slightly wider than the standard width.expanded: The characters are moderately wider than the standard width.extra-expanded: The characters are wider than the standard width.ultra-expanded: The characters are significantly wider than the standard width.
Example:
p {
font-family: Arial, sans-serif;
font-stretch: expanded;
}In this example, all <p> elements will have their font characters expanded, making them slightly wider than the standard width for the Arial font family.
Since font-stretch is not widely supported, it’s generally not recommended to use this property in your CSS. Instead, you should focus on using standard font properties like font-family, font-size, font-weight, and font-style to control the appearance of your text.
If you want to adjust the width of the characters, you can consider using a font that comes in different font weights or styles, or explore variable fonts that allow you to have more control over font variations, including width adjustments.
Remember to always test your CSS properties across different browsers to ensure cross-browser compatibility. In the case of font-stretch, it’s better to use other font properties or alternative font families to achieve your desired typography effects.