blob: e0d8951d8064162c0b76b147be652bf326cc157f [file] [log] [blame]
<!DOCTYPE html>
<!--
| If the desired weight is less than 400, weights below the desired weight are
| checked in descending order followed by weights above the desired weight in
| ascending order until a match is found.
| If the desired weight is greater than 500, weights above the desired weight
| are checked in ascending order followed by weights below the desired weight
| in descending order until a match is found.
| 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;
}
.thin-weight {
font-weight: 100;
}
.extra-light-weight {
font-weight: 200;
}
.light-weight {
font-weight: 300;
}
.normal-weight {
font-weight: 400;
}
.medium-weight {
font-weight: 500;
}
.semi-bold-weight {
font-weight: 600;
}
.bold-weight {
font-weight: 700;
}
.extra-bold-weight {
font-weight: 800;
}
.black-weight {
font-weight: 900;
}
</style>
</head>
<body>
<div class="containing-block">
<div class="thin-weight">The Hegemony Consul</div>
<div class="extra-light-weight">The Hegemony Consul</div>
<div class="light-weight">The Hegemony Consul</div>
<div class="normal-weight">The Hegemony Consul</div>
<div class="medium-weight">The Hegemony Consul</div>
<div class="semi-bold-weight">The Hegemony Consul</div>
<div class="bold-weight">The Hegemony Consul</div>
<div class="extra-bold-weight">The Hegemony Consul</div>
<div class="black-weight">The Hegemony Consul</div>
</div>
</body>
</html>