CSS font properties allow us to modify the appearance of text. The following properties help us style text.
font-family
This property is used to set the font face for an element.
font-kerning
To make the character spacing uniform and increase readability, the font-kerning property is used. However, this property is font specific.
font-size
The font-size property sets the size of the font.
font-stretch
Some fonts have additional faces like condensed, bold, etc. The font-stretch property is used to specify these.
font-style
To italicize the text by an angle, the font-style property is used.
font-variant
font-variant allows us to specify whether an element should be displayed in small caps or not.
font-weight
The boldness of characters is specified by the font-weight property.
We can also use the font property which is a shorthand for all the above properties.
Syntax
The syntax of font property is as follows −
Selector {
font: /*value*/
}The following examples illustrate CSS font property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 3px;
float: left;
font-family: "Matura MT Script Capitals";
font-size: 200%;
}
#a {
font-style: normal;
}
#b {
font-style: italic;
}
#c {
font-style: oblique 40deg;
font-family: "Harlow Solid Italic";
}
</style>
</head>
<body>
<div id="a">Normal Demo</div>
<div id="b">Italic Demo</div>
<div id="c">Oblique Demo</div>
</body>
</html>Output
This gives the following output −
Example
<!DOCTYPE html>
<html>
<head>
<style>
* {
font-size: 1.1em;
list-style: circle;
}
li:first-child {
background-color: seashell;
font-family: cursive;
}
li:nth-child(2) {
background-color: azure;
font-family: "Brush Script Std", serif;
}
li:last-child {
background-color: springgreen;
font-family: "Gigi", Arial;
}
</style>
</head>
<body>
<h2>Learning Scala</h2>
<ul>
<li>Scala is a pure object-oriented language in the sense that every value is an object.</li>
<li>Scala is compiled into Java Byte Code which is executed by the Java Virtual Machine (JVM).</li>
<li>Scala provides a lightweight syntax for defining anonymous functions</li>
</ul>
</body>
</html>Output
This gives the following output −
