font-face-stretch-auto-variable.html (1594B)
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 <link rel="match" href="font-face-stretch-auto-variable-ref.html"> 6 <link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-prop-desc" /> 7 <meta name="assert" content="font-stretch: auto applies automatic width range for variable fonts in @font-face descriptor"> 8 <style> 9 @font-face { 10 font-family: "Roboto"; 11 src: url('support/fonts/RobotoExtremo-VF.subset.ttf') format('truetype'); 12 font-display: swap; 13 font-style: normal; 14 font-stretch: auto; 15 } 16 .stretch50 { 17 font-family: "Roboto"; 18 font-size: 3em; 19 font-stretch: 50%; 20 } 21 .stretch75 { 22 font-family: "Roboto"; 23 font-size: 3em; 24 font-stretch: 75%; 25 } 26 .stretch87 { 27 font-family: "Roboto"; 28 font-size: 3em; 29 font-stretch: 87.5%; 30 } 31 .stretch100 { 32 font-family: "Roboto"; 33 font-size: 3em; 34 font-stretch: 100%; 35 } 36 .stretch112 { 37 font-family: "Roboto"; 38 font-size: 3em; 39 font-stretch: 112.5%; 40 } 41 .stretch125 { 42 font-family: "Roboto"; 43 font-size: 3em; 44 font-stretch: 125%; 45 } 46 .stretch200 { 47 font-family: "Roboto"; 48 font-size: 3em; 49 font-stretch: 200%; 50 } 51 </style> 52 53 <p class="stretch50">text</p> 54 <p class="stretch75">text</p> 55 <p class="stretch87">text</p> 56 <p class="stretch100">text</p> 57 <p class="stretch112">text</p> 58 <p class="stretch125">text</p> 59 <p class="stretch200">text</p>