font-face-weight-auto-variable.html (1296B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <meta charset="utf-8"/> 4 <title>CSS Test: Support for font-weight:auto in @font-face</title> 5 <link rel="match" href="font-face-weight-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-weight: auto applies automatic weight 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-weight: auto; 15 } 16 .weight50 { 17 font-family: "Roboto"; 18 font-size: 3em; 19 font-weight: 50; 20 } 21 .weight100 { 22 font-family: "Roboto"; 23 font-size: 3em; 24 font-weight: 100; 25 } 26 .weight400 { 27 font-family: "Roboto"; 28 font-size: 3em; 29 font-weight: 400; 30 } 31 .weight900 { 32 font-family: "Roboto"; 33 font-size: 3em; 34 font-weight: 900; 35 } 36 .weight990 { 37 font-family: "Roboto"; 38 font-size: 3em; 39 font-weight: 990; 40 } 41 </style> 42 43 <p class="weight50">text</p> 44 <p class="weight100">text</p> 45 <p class="weight400">text</p> 46 <p class="weight900">text</p> 47 <p class="weight990">text</p>