CSS font Property
The CSS font property is a shorthand property that asserts all the different properties of the font of an element. It also sets the font of an element to system font. Any of the individual values, not specified, is set to the corresponding initial value.
This property is a shorthand property for the constituent properties such as font-family, font-stretch, font-size, font-style, font-variant, line-height and font-weight properties.
Syntax
[ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-barwhere <font-variant-css21> = [ normal | small-caps ]
Example: CSS font Property
In the example below, we are using the font property to design our text according to our choice of font styles, colours or patterns. In this case, we have given the font property as sans-serif.
<!DOCTYPE html>
<html>
<head>
<title>The font property in CSS</title>
<style type="text/css">
p {
font: 12px/14px sans-serif;
color: deeppink;
padding: 5px;
}
</style>
</head>
<body>
<p>Simplified Programming Education Enjoy the #rightway to learn coding.</p>
</body>
</html>
Output
Example 2: CSS font Property
In this example, we have given the font property value as status-bar. Hence, our text gets organised in a way that looks like the status bar on top of the page.
<!DOCTYPE html>
<html>
<head>
<title>The font property in CSS</title>
<style type="text/css">
p {
font: status-bar;
color: deeppink;
padding: 5px;
}
</style>
</head>
<body>
<p>Simplified Programming Education Enjoy the #rightway to learn coding.</p>
</body>
</html>
Output
Live Example
Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.
Browser Compatibility
The term 'browser compatibility' indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
1 |
1 |
| Edge |
12 |
12 |
| Firefox |
1 |
1 |
| Internet Explorer |
3 |
3 |
| Opera |
3.5 |
3.5 |
| Safari |
1 |
1 |
| Webview Android |
37 |
37 |
| Chrome Android |
18 |
18 |
| Firefox Android |
4 |
4 |
| Opera Android |
14 |
14 |
| IOS Safari |
1 |
1 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for the font-style, font-variant, font-weight, line-height and font-stretch is 'normal'. The initial value for the font-size is 'medium' and for the font-family, it depends on the user agent. This property is applicable to the '::first-letter' and '::first-line'. It is an inherited property. Percentage values refer to the font size. The computed value for the font-style, font-variant, font-stretch, font-size and font-family is the as specified one. For the font-weight it is the keyword or the numerical value.
