stretch-distance-over-weight-distance.html (2214B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <link rel="stylesheet" href="font-matching.css"> 5 <!-- Tests CSS Fonts Level 4, section 5.2. font matching algorithm. Precedence 6 of properties (stretch over style, style over weight) and distance of stretch . --> 7 <style> 8 /* Matches 2 & 3 in stretch, but style and weight at the other end of the 9 spectrum, choosen for 1-5. */ 10 @font-face { 11 font-family: variable_axes; 12 src: url("resources/variabletest_matching.ttf"); 13 font-stretch: 62.5% 75%; 14 font-style: oblique 45deg 67.5deg; 15 font-weight: 700 800; 16 } 17 18 /* Same stretch as above, and better weight match for 2 & 3, but must not 19 get choosen since worse style distance. */ 20 @font-face { 21 font-family: variable_axes; 22 src: url("resources/variabletest_matching.ttf"); 23 font-stretch: 62.5% 75%; 24 font-style: oblique 90deg; 25 font-weight: 200 300; 26 } 27 28 /* Matches 7 & 8 in stretch, but style and weight at the opposite end of the 29 spectrum, choosen for 6-9. */ 30 @font-face { 31 font-family: variable_axes; 32 src: url("resources/variabletest_matching.ttf"); 33 font-stretch: 125% 150%; 34 font-style: oblique -67.5deg -45deg; 35 font-weight: 200 300; 36 } 37 38 39 /* Same stretch as previous, and better weight match for 7 & 8 but most not 40 get choosen because of worse style distance. */ 41 @font-face { 42 font-family: variable_axes; 43 src: url("resources/variabletest_matching.ttf"); 44 font-stretch: 125% 150%; 45 font-style: oblique -90deg; 46 font-weight: 700 800; 47 } 48 </style> 49 <link rel="match" href="stretch-distance-over-weight-distance-ref.html"> 50 <span id="stretch_style_weight_1">MNOP</span> 51 <span id="stretch_style_weight_2">MNOP</span> 52 <span id="stretch_style_weight_3">MNOP</span> 53 <span id="stretch_style_weight_4">MNOP</span> 54 <span id="stretch_style_weight_5">MNOP</span> 55 <span id="stretch_style_weight_6">MNOP</span> 56 <span id="stretch_style_weight_7">MNOP</span> 57 <span id="stretch_style_weight_8">MNOP</span> 58 <span id="stretch_style_weight_9">MNOP</span> 59 <script> 60 document.fonts.ready.then( 61 () => { document.documentElement.classList.remove("reftest-wait"); }); 62 </script> 63 </html>