layout/reftests/font-variations/font-optical-sizing-1.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset=utf-8>
   5 <style>
   6 @font-face {
   7   font-family: Voto;
   8   src: url(../fonts/VotoSerifGX.latin1.ttf);
   9 }
  10 body {
  11   font-family: Voto;
  12   font-variation-settings: "wght" 50;
  13   font-optical-sizing: auto;
  14 }
  15 span {
  16   font-variation-settings: "wght" 100; /* Voto weights are non-standard,
  17                                           so this is actually quite bold */
  18 }
  19 </style>
  20 </head>
  21 <body>
  22 <div style="font-size: 9px">Voto <span>bold</span> at 9px</div>
  23 <div style="font-size: 12px">Voto <span>bold</span> at 12px</div>
  24 <div style="font-size: 16px">Voto <span>bold</span> at 16px</div>
  25 <div style="font-size: 24px">Voto <span>bold</span> at 24px</div>
  26 <div style="font-size: 32px">Voto <span>bold</span> at 32px</div>
  27 <div style="font-size: 48px">Voto <span>bold</span> at 48px</div>
  28 <div style="font-size: 72px">Voto <span>bold</span> at 72px</div>
  29 <div style="font-size: 96px">Voto <span>bold</span> at 96px</div>
  30 </body>
  31 </html>