CSS Fonts - CodeGK

♦ CSS Fonts

♣ About CSS Fonts

Font property define intrinsic properties of text such font family, size, boldness.

♣ Example1: CSS Font Family

Certain pre-defined font-families exist which define the way text looks.
In this example, various famous font-families are illustrated.

Example

Input:

Output:

♣ Example2: CSS Font Style

In this example, various font-styles are explored.

Example

Input:

Output:

♣ Example3: CSS Font Weight

Font weight basically means the thickness of font.
In this example, various font-weights are explored.

Example

Input:

Output:

♣ Example4: CSS Font Variant

In this example, various font-variants are illustrated.

Example

Input:

Output:

♣ Example5: CSS Font Size

In this example, various font-size are illustrated.

Example

Input:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">

*{
text-align:center;
color: darkred;
}

div.siz1 {
  font-size: small;
}

div.siz2 {
  font-size: medium;
}

div.siz3 {
  font-size: large;
}

div.siz4 {
  font-size: larger;
}

div.siz5 {
  font-size: x-large;
}

div.siz6 {
  font-size: xx-large;
}

div.siz7 {
  font-size: 40px;
}

div.siz8 {
  font-size: 60px;
}

div.siz9 {
  font-size: 450%;
}

div.siz10 {
  font-size: 650%;
}

</style>

<body>

<div class="siz1">Yo Folks, Iam small</div>
<hr>

<div class="siz2">Yo Folks, Iam medium</div>
<hr>

<div class="siz3">Yo Folks, Iam large</div>
<hr>

<div class="siz4">Yo Folks, Iam larger</div>
<hr>

<div class="siz5">Yo Folks, Iam x-large</div>
<hr>

<div class="siz6">Yo Folks, Iam xx-large</div>
<hr>

<div class="siz7">Yo Folks, Iam 40px</div>
<hr>

<div class="siz8">Yo Folks, Iam 60px</div>
<hr>

<div class="siz9">Yo Folks, Iam 450%</div>
<hr>

<div class="siz10">Yo Folks, Iam 650%</div>
<hr>

</body>
</html>

Output:

Prev_Lesson Next_Lesson