font-face-stretch-auto-variable-ref.html (1449B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <meta charset="utf-8"/> 4 <title>CSS Test: Support for font-stretch: auto in @font-face</title> 5 <style> 6 @font-face { 7 font-family: "Roboto"; 8 src: url('support/fonts/RobotoExtremo-VF.subset.ttf') format('truetype'); 9 font-display: swap; 10 font-style: normal; 11 font-stretch: 75% 125%; 12 } 13 .stretch50 { 14 font-family: "Roboto"; 15 font-size: 3em; 16 font-variation-settings: 'wdth' 50; 17 } 18 .stretch75 { 19 font-family: "Roboto"; 20 font-size: 3em; 21 font-variation-settings: 'wdth' 75; 22 } 23 .stretch87 { 24 font-family: "Roboto"; 25 font-size: 3em; 26 font-variation-settings: 'wdth' 87.5; 27 } 28 .stretch100 { 29 font-family: "Roboto"; 30 font-size: 3em; 31 font-variation-settings: 'wdth' 100; 32 } 33 .stretch112 { 34 font-family: "Roboto"; 35 font-size: 3em; 36 font-variation-settings: 'wdth' 112.5; 37 } 38 .stretch125 { 39 font-family: "Roboto"; 40 font-size: 3em; 41 font-variation-settings: 'wdth' 125; 42 } 43 .stretch200 { 44 font-family: "Roboto"; 45 font-size: 3em; 46 font-variation-settings: 'wdth' 200; 47 } 48 </style> 49 50 <p class="stretch50">text</p> 51 <p class="stretch75">text</p> 52 <p class="stretch87">text</p> 53 <p class="stretch100">text</p> 54 <p class="stretch112">text</p> 55 <p class="stretch125">text</p> 56 <p class="stretch200">text</p>