Click and drag to scroll left and right to view all 8 figures.
<!-- figure 13.2 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { font-family: Times, "Times New Roman", Georgia, serif; }
h3 { font-family: Verdana, Arial, Helvetica, sans-serif; }
p.author { font-family: "Courier New" Courier, monospace; }
</style>
</head>
<body>
<h3>Origin of All</h3>
<p class="author">by Wu Knows</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id gravida justo.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Maecenas magna sapien, sodales in pretium at, semper id magna. In pretium placerat
euismod. Vivamus quam risus, finibus id placerat vitae, maximus ut urna. Mauris in
orci arcu. Integer sed enim auctor, tempor dolor ac, auctor eros. Etiam pharetra
eleifend felis, quis rutrum dui facilisis in.</p>
</body>
</html>
<!-- figure 13.4 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
@font-face {
font-family: "My Serif Bold" ;
src: url("fonts/VeraSeBd.ttf");
}
p.one { font-family: "My Serif Bold", serif; }
h3 { font-family: Verdana, Arial, Helvetica, sans-serif; }
</style>
</head>
<body>
<h3>Font-face at-rule</h3>
<p class="one">This text is styled using the downloaded VeraSeBd font.</p>
<p class="two">This text is styled using the default local font.</p>
</body>
</html>
<!-- figure 13.6 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
@font-face {
font-family: "My Serif Bold";
font-style: normal;
src: url("fonts/VeraSeBd.ttf");
unicode-range: U+000-5FF, U+3000-9FFF;
}
p.one { font-family: "My Serif Bold", serif; }
h3 { font-family: Verdana, Arial, Helvetica, sans-serif; }
</style>
</head>
<body>
<h3>Font-face at-rule</h3>
<p class="one">This text is styled using the downloaded VeraSeBd font.</p>
<p class="two">This text is styled using the default local font.</p>
</body>
</html>
<!-- figure 13.7 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
@font-face {
font-family: "MyPreferredSerif";
src: local("Afta Serif"),
local("Afta Serif"),
url("fonts/AlfaSerif.eot"),
url("fonts/AftaSerif.eot?#iefix") format("embedded-opentype"),
url("fonts/AftaSerif.woff2") format("woff2"),
url("fonts/AftaSerif.woff") format("woff"),
url("fonts/AftaSerif.ttf") format("truetype"),
url("fonts/AftaSerif.svg#AftaSerif") format("svg"),
}
body { font-family: MyPreferredSerif, serif; }
</style>
</head>
<body>
<p>This is Afta Serif.</p>
</body>
</html>
<!-- figure 13.8 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
.one { font-family: "Indie Flower", cursive; }
</style>
</head>
<body>
<h3>Import rule</h3>
<p class="one">This text is styled using an imported Google font.</p>
<p>This text is styled using the default local font.</p>
</body>
</html>
<!-- figure 13.18 & figure 13.19 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
}
.xxsamll { font-size: xx-small; }
.small { font-size: small; }
.larger { font-size: larger; }
.percent { font-size: 200%; }
.em { font-size: 1.5em; }
</style>
</head>
<body>
<h1 class="xxsmall">xxSmall H1</h1>
<h1 class="small">Small H1</h1>
<h1 class="larger">Larger H1</h1>
<h1 class="percent">200% H1</h1>
<h1 class="em">1.5em H1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id gravida justo.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Maecenas magna sapien, sodales in pretium at, semper id magna. In pretium placerat
euismod. Vivamus quam risus, finibus id placerat vitae, maximus ut urna. Mauris in
orci arcu. Integer sed enim auctor, tempor dolor ac, auctor eros. Etiam pharetra
eleifend felis, quis rutrum dui facilisis in.</p>
</body>
</html>
<!-- figure 13.24 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { font-family: Arial, Verdana, sans-serif; }
p.normal { font-weight: normal; }
p.bolder { font-weight: bolder; }
p.lighter { font-weight: lighter; }
p.bold { font-weight: bold; }
p.weight700 { font-weight: weight700; }
p.weight900 { font-weight: weight900; }
</style>
</head>
<body>
<h3>Font Weight</h3>
<p class="normal">This is normal.</p>
<p class="bolder">This is bolder.</p>
<p class="lighter">This is lighter.</p>
<p class="bolder">This is bold.</p>
<p class="weight700">This is 700 weight.</p>
<p class="weight900">This is 900 weight.</p>
</body>
</html>
<!-- figure 13.26 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p.normal { font-style: normal; }
p.italic { font-style: italic; }
p.oblique { font-style: oblique; }
</style>
</head>
<body>
<h3>Font style</h3>
<p class="normal">This paragraph is in normal font</p>
<p class="italic">This paragraph is in italic font</p>
<p class="oblique">This paragraph is in oblique font</p>
</body>
</html>