font-display-2.html (1461B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>font-display test</title> 5 <meta charset="utf-8"> 6 <style> 7 body { margin: 20px } 8 9 @font-face { 10 font-family: test2-auto; 11 src: url(../fonts/markfonts-delay.sjs?font=markA&delay=4500&test=font-display-2-auto); 12 font-display: auto; 13 } 14 15 @font-face { 16 font-family: test2-block; 17 src: url(../fonts/markfonts-delay.sjs?font=markA&delay=4500&test=font-display-2-block); 18 font-display: block; 19 } 20 21 @font-face { 22 font-family: test2-swap; 23 src: url(../fonts/markfonts-delay.sjs?font=markA&delay=4500&test=font-display-2-swap); 24 font-display: swap; 25 } 26 27 @font-face { 28 font-family: test2-fallback; 29 src: url(../fonts/markfonts-delay.sjs?font=markA&delay=4500&test=font-display-2-fallback); 30 font-display: fallback; 31 } 32 33 @font-face { 34 font-family: test2-optional; 35 src: url(../fonts/markfonts-delay.sjs?font=markA&delay=4500&test=font-display-2-optional); 36 font-display: optional; 37 } 38 39 div.test { 40 font-size: 600%; 41 line-height: 1.3em; 42 width: 500px; 43 } 44 45 div.test p { 46 display: inline-block; 47 width: 150px; 48 margin: 0; 49 } 50 51 .auto { font-family: test2-auto; } 52 .block { font-family: test2-block; } 53 .swap { font-family: test2-swap; } 54 .fallback { font-family: test2-fallback; } 55 .optional { font-family: test2-optional; } 56 57 </style> 58 </head> 59 60 <body> 61 <div class="test"> 62 <p class="auto">A</p> 63 <p class="block">A</p> 64 </div> 65 <div class="test"> 66 <p class="swap">A</p> 67 <p class="fallback">A</p> 68 <p class="optional">A</p> 69 </div> 70 </body> 71 </html>