Fonts
I described a few font-related properties that you can manipulate using CSS. In fact, you can use CSS to control all font usage on the page. You can use font properties to modify pretty much any aspect of the type used to render text in a browser. You can provide a single font or a list of fonts, and the browser will search for each of the fonts until it finds one on your system that appears in the list.
👉Font-family
The font-family property can be used to specify that text should be rendered in a font belonging to a particular general category, such as monospace or serif. You can also use the font-family property to specify a specific font. Enables you to specify the font used for text. The possible values are:
- serif
- sans-serif
- cursive
- fantasy
- monospace
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS Fonts </title>
<style>
p1{
font-family: serif;
}
p2{
font-family: sans-serif;
}
p3{
font-family: cursive;
}
p4{
font-family: fantasy;
}
p5{
font-family: monospace;
}
</style>
</head>
<body>
<p1> This is a paragraph uses serif </p1>
<p2> This is a paragraph uses sans-serif </p2>
<p3> This is a paragraph uses cursive </p3>
<p4> This is a paragraph uses fantasy </p4>
<p5> This is a paragraph uses monospace </p5>
</body>
</html>
👉Font-variant
The font variant property, you can have your text rendered so that lowercase letters are replaced with small capital letters. The two values available are:
- normal
- small-caps
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS Fonts </title>
<style>
p1{
font-variant: normal;
}
p2{
font-variant: small-caps;
}
</style>
</head>
<body>
<p1> This is a paragraph uses normal </p1>
<p2> This is a paragraph uses small-caps </p2>
</body>
</html>
👉Font-style
Specifies whether text should be italicized or The font-style property can be used to italicize text. Most fonts provide an italic version, which has letterforms separate from the normal version or an oblique version, but not both. It has possible values are:
- normal
- italic
- oblique
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS Fonts </title>
<style>
p1{
font-style: normal;
}
p2{
font-style: italic;
}
p3{
font-style: oblique;
}
</style>
</head>
<body>
<p1> This is a paragraph uses normal </p1>
<p2> This is a paragraph uses italic </p2>
<p3> This is a paragraph uses oblique </p3>
</body>
</html>
👉Font-weight
Specifies the degree to which text should be emboldened. To specify that text should be boldface, the font-weight property is used. Valid values are:
- normal (the default)
- bold
- bolder
- lighter
- 100 to 900
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS Fonts </title>
<style>
p1{
font-weight: normal;
}
p2{
font-weight: bold;
}
p3{
font-weight: bolder;
}
p4{
font-weight: lighter;
}
p5{
font-weight: 100;
}
p6{
font-weight: 200;
}
p7{
font-weight: 300;
}
p8{
font-weight: 400;
}
p9{
font-weight: 500;
}
p10{
font-weight: 600;
}
p11{
font-weight: 700;
}
p12{
font-weight: 800;
}
p13{
font-weight: 900;
}
</style>
</head>
<body>
<p1> This is a paragraph uses normal </p1>
<p2> This is a paragraph uses bold </p2>
<p3> This is a paragraph uses bolder </p3>
<p4> This is a paragraph uses lighter </p4>
<p5> This paragraph is 100 weight </p5>
<p6> This paragraph is 200 weight </p6>
<p7> This paragraph is 300 weight </p7>
<p8> This paragraph is 400 weight </p8>
<p9> This paragraph is 500 weight </p9>
<p10> This paragraph is 600 weight </p10>
<p11> This paragraph is 700 weight </p11>
<p12> This paragraph is 800 weight </p12>
<p13> This paragraph is 900 weight </p13>
</body>
</html>
👉Font-size
Enables you specify the font size in any unit supported by CSS. CSS provides a lot of flexibility and power when it comes to specifying how large things are. You can specify sizes in a variety of units. To change the some text, the font-size property is used. The value is a size (relative or absolute) in any of the units of measure supported by CSS. Valid values are:
- small
- smaller
- medium
- large
- larger
- percentage (%)
- in - inches
- cm - centimeters
- mm - millimeters
- pt - points
- pc - picas
Relative
- em - height of the elements font
- ex - height of x character in the element's font
- px - pixels, which are relative to the viewing device
- vh - percent of the viewport height
- vw - percent of the viewport width
- rem - height of the root element's font
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS Fonts </title>
<style>
p1{
font-size: small;
}
p2{
font-size: smaller;
}
p3{
font-size: medium;
}
p4{
font-size: large;
}
p5{
font-size: larger;
}
p6{
font-size: 100%;
}
p7{
font-size: 5px;
}
p8{
font-size: 5em;
}
p9{
font-size: 5vh;
}
p10{
font-size: 5vw;
}
</style>
</head>
<body>
<p1> This is a paragraph uses small size </p1>
<p2> This is a paragraph uses smaller size </p2>
<p3> This is a paragraph uses medium size </p3>
<p4> This is a paragraph uses large size </p4>
<p5> This is a paragraph uses larger size </p5>
<p6> This is a paragraph uses percentage size </p6>
<p7> This is a paragraph uses pixels size </p7>
<p8> This is a paragraph uses em size </p8>
<p9> This is a paragraph uses viewport height size </p9>
<p10> This is a paragraph uses viewport width size </p10>
</body>
</html>
NOTES.....
You must leave no spaces between the number of units and unit specification. In other words, 100%, 5px, 5em, 5vh, 5vw are valid, but 100 %, 5 px, 5 em, 5 vh, 5 vw aren't valid.