blob: 419b3726eea1cb46cdf92ef174afb7a814ac6e86 [file] [log] [blame]
<!DOCTYPE html>
<!--
| For a font family defined with several @font-face rules, style
| descriptors define the characteristics of a font face and area
| used in the process of matching styles to specific faces.
| https://www.w3.org/TR/css3-fonts/#font-prop-desc
-->
<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;
}
.font-face-1-normal-normal {
font-family: font-face-1;
font-weight: normal;
font-style: normal;
}
.font-face-1-normal-italic {
font-family: font-face-1;
font-weight: normal;
font-style: italic;
}
.font-face-1-bold-normal {
font-family: font-face-1;
font-weight: bold;
font-style: normal;
}
.font-face-1-bold-italic {
font-family: font-face-1;
font-weight: bold;
font-style: italic;
}
.font-face-2-normal-normal {
font-family: font-face-2;
font-weight: normal;
font-style: normal;
}
.font-face-2-normal-italic {
font-family: font-face-2;
font-weight: normal;
font-style: italic;
}
.font-face-2-bold-normal {
font-family: font-face-2;
font-weight: bold;
font-style: normal;
}
.font-face-2-bold-italic {
font-family: font-face-2;
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: font-face-1;
src: local(Roboto-Regular);
}
@font-face {
font-family: font-face-2;
src: local(DancingScript);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: font-face-2;
src: local(Coming Soon);
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: font-face-2;
src: local(CarroisGothicSC-Regular);
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: font-face-2;
src: local(Droid Sans Mono);
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<div class="containing-block">
<div class="font-face-1-normal-normal">The Hegemony Consul</div>
<!-- Note: font-face-1 selects a local font file, which only has an regular
style. So, for the next three cases, a normal style is rendered,
although synthetic bolding is used for the bold weights.
-->
<div class="font-face-1-normal-italic">The Hegemony Consul</div>
<div class="font-face-1-bold-normal">The Hegemony Consul</div>
<div class="font-face-1-bold-italic">The Hegemony Consul</div>
<div class="font-face-2-normal-normal">The Hegemony Consul</div>
<div class="font-face-2-normal-italic">The Hegemony Consul</div>
<div class="font-face-2-bold-normal">The Hegemony Consul</div>
<div class="font-face-2-bold-italic">The Hegemony Consul</div>
</div>
</body>
</html>