Fonts Styling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Fonts Styling</title>
<!-- Google fonts external stylesheet link -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Roboto|Sofia|Trirong|Arial">
<style>
.demofont {
font-family: Arial, Helvetica, "Courier New";
font-size: 20px;
line-height: 30px;
font-weight: 400;
}
.demoWebSafe {
font-family: Tahoma, Verdana, sans-serif;
}
.demoFontStyle {
font-style: italic;
}
span {
font-variant: small-caps;
}
.demoGoogleFont {
font-family: "Audiowide", "Roboto";
}
.demoFontShorthand {
font: italic normal bold 12px/30px Tahoma, serif;
}
</style>
</head>
<body>
<!--
font-family : to specify the font of a text
font-size : sets the size of the text.
line-height : the vertical distance between two lines
font-style : is mostly used to specify italic text.
font-variant : specifies whether or not a text should be displayed in a small-caps font.
font-weight : sets how thick or thin characters in text should be displayed
font : property is a shorthand property for:
- font-size/line-height ( required )
- font-family ( required )
- font-style
- font-variant
- font-weight
- If one of values is missing, their default value are used.
-->
<h1>Demo: Fonts Styling</h1>
<section>
<h2>Demo font family, size, line-height & weight</h2>
<p class="demofont">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam cum inventore aliquid beatae tempore magnam similique voluptatibus ipsa laudantium quaerat expedita, tenetur alias magni totam fugit rem vitae impedit, non velit, enim vero? Neque incidunt minima mollitia, sed, beatae quisquam rem omnis maiores ipsam iusto atque ex deleniti. Possimus deleniti voluptatum nam pariatur fugit quisquam dolor porro magni iusto ducimus similique ipsa ut officiis fuga natus, voluptate magnam, asperiores distinctio maiores eum cupiditate, aliquid animi? Libero dolorum eius tempora aliquam accusantium molestias sapiente odit mollitia saepe voluptatum! Aliquam tempora nostrum voluptas necessitatibus accusamus! Mollitia laboriosam eum porro ipsum nobis cupiditate?</p>
</section>
<section>
<h2>Demo Web-Safe fonts</h2>
<p class="demoWebSafe">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam cum inventore aliquid beatae tempore magnam similique voluptatibus ipsa laudantium quaerat expedita, tenetur alias magni totam fugit rem vitae impedit, non velit, enim vero? Neque incidunt minima mollitia, sed, beatae quisquam rem omnis maiores ipsam iusto atque ex deleniti. Possimus deleniti voluptatum nam pariatur fugit quisquam dolor porro magni iusto ducimus similique ipsa ut officiis fuga natus, voluptate magnam, asperiores distinctio maiores eum cupiditate, aliquid animi? Libero dolorum eius tempora aliquam accusantium molestias sapiente odit mollitia saepe voluptatum! Aliquam tempora nostrum voluptas necessitatibus accusamus! Mollitia laboriosam eum porro ipsum nobis cupiditate?</p>
</section>
<section>
<h2>Demo Font style (italics) & variant</h2>
<p class="demoFontStyle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam cum inventore aliquid beatae tempore magnam similique voluptatibus ipsa laudantium quaerat expedita, tenetur alias magni totam fugit rem vitae impedit, non velit, enim vero? Neque incidunt minima mollitia, sed, beatae quisquam rem omnis maiores ipsam iusto atque ex deleniti. Possimus deleniti voluptatum nam pariatur fugit quisquam dolor porro magni iusto ducimus similique ipsa ut officiis fuga natus, voluptate magnam, asperiores distinctio maiores eum cupiditate, aliquid animi? Libero dolorum eius tempora aliquam accusantium molestias sapiente odit mollitia saepe voluptatum! Aliquam tempora nostrum voluptas necessitatibus accusamus! Mollitia laboriosam eum porro ipsum nobis cupiditate?</p>
<span>This line is to demonstrate font-variant property set to small-caps.</span>
</section>
<section>
<h2>Demo Google Fonts</h2>
<p class="demoGoogleFont">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam cum inventore aliquid beatae tempore magnam similique voluptatibus ipsa laudantium quaerat expedita, tenetur alias magni totam fugit rem vitae impedit, non velit, enim vero? Neque incidunt minima mollitia, sed, beatae quisquam rem omnis maiores ipsam iusto atque ex deleniti. Possimus deleniti voluptatum nam pariatur fugit quisquam dolor porro magni iusto ducimus similique ipsa ut officiis fuga natus, voluptate magnam, asperiores distinctio maiores eum cupiditate, aliquid animi? Libero dolorum eius tempora aliquam accusantium molestias sapiente odit mollitia saepe voluptatum! Aliquam tempora nostrum voluptas necessitatibus accusamus! Mollitia laboriosam eum porro ipsum nobis cupiditate?</p>
</section>
<section>
<h2>Demo font shorthand</h2>
<p class="demoFontShorthand">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam cum inventore aliquid beatae tempore magnam similique voluptatibus ipsa laudantium quaerat expedita, tenetur alias magni totam fugit rem vitae impedit, non velit, enim vero? Neque incidunt minima mollitia, sed, beatae quisquam rem omnis maiores ipsam iusto atque ex deleniti. Possimus deleniti voluptatum nam pariatur fugit quisquam dolor porro magni iusto ducimus similique ipsa ut officiis fuga natus, voluptate magnam, asperiores distinctio maiores eum cupiditate, aliquid animi? Libero dolorum eius tempora aliquam accusantium molestias sapiente odit mollitia saepe voluptatum! Aliquam tempora nostrum voluptas necessitatibus accusamus! Mollitia laboriosam eum porro ipsum nobis cupiditate?</p>
</section>
</body>
</html>