blob: 07a929eeac5805a3af7b2d1c4a70fb23aa8c5004 [file] [log] [blame]
<!DOCTYPE html>
<!--
| The user agent should use the first listed font family that supports the
| character.
| https://www.w3.org/TR/css3-fonts/#font-style-matching
-->
<html>
<head>
<meta charset="utf-8">
<style>
body {
margin: 0;
font-family: Roboto;
font-size: 30px;
font-weight: normal;
color: #fff;
}
.containing-block {
background-color: #03a9f4;
width: 700px;
}
.sans-serif {
font-family: unavailable1, sans-serif, Roboto, unavailable2;
}
.serif {
font-family: unavailable1, unavailable2, serif, Roboto;
}
.monospace {
font-family: "unavailable1", monospace, Roboto, "unavailable1";
}
.serif-monospace {
font-family: serif-monospace, Roboto, "unavailable1", "unavailable2";
}
.casual {
font-family: "unavailable1", "unavailable2", casual, Roboto;
}
.cursive {
font-family: cursive, sans-serif-smallcaps;
}
.sans-serif-smallcaps {
font-family: sans-serif-smallcaps, cursive;
}
</style>
</head>
<body>
<div class="containing-block">
<div class="sans-serif">The Hegemony Consul</div>
<div class="serif">The Hegemony Consul</div>
<div class="monospace">The Hegemony Consul</div>
<div class="serif-monospace">The Hegemony Consul</div>
<div class="casual">The Hegemony Consul</div>
<div class="cursive">The Hegemony Consul</div>
<div class="sans-serif-smallcaps">The Hegemony Consul</div>
</div>
</body>
</html>