font-display-1-ref.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

<head>

<title>font-display test</title>

<meta charset="utf-8">

<style>

body { margin: 20px }

@font-face {

  font-family: test1-ref;

  src: url(../fonts/markA.woff);

div.test {

  font-size: 600%;

  line-height: 1.3em;

  width: 500px;

div.test p {

  display: inline-block;

  width: 150px;

  margin: 0;

.auto { font-family: test1-ref; }

.block { font-family: test1-ref; }

.swap { font-family: test1-ref; }

.fallback { font-family: test1-ref; }

.optional { font-family: font-that-does-not-exist; }

</style>

</head>

<body>

<div class="test">

<p class="auto">A</p>

<p class="block">A</p>

</div>

<div class="test">

<p class="swap">A</p>

<p class="fallback">A</p>

<p class="optional">A</p>

</div>

</body>

</html>