Font Properties in CSS

CSSWeb DevelopmentFront End Technology

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

 Live Demo

<!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

 Live Demo

<!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 −

raja
Published on 08-Jan-2020 07:17:46
Advertisements