style-ranges-over-weight-direction.html (2249B)
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 search 7 direction for style. --> 8 <style> 9 /* Matches, 2 & 3 in stretch, has wrong style, but in the right search 10 direction, so weight 400 gets chosen for 1-3. */ 11 @font-face { 12 font-family: variable_axes; 13 src: url("resources/variabletest_matching.ttf"); 14 font-stretch: 62.5% 75%; 15 font-style: oblique -90deg; 16 font-weight: 400; 17 } 18 19 /* Matches 2 & 3 in stretch and weight but has wrong style and in the wrong 20 search direction, chosen for 4 and 5. */ 21 @font-face { 22 font-family: variable_axes; 23 src: url("resources/variabletest_matching.ttf"); 24 font-stretch: 62.5% 75%; 25 font-style: oblique -20deg; 26 font-weight: 200 300; 27 } 28 29 30 /* Matches 7 & 8 in stretch, has wrong style, but in the right search 31 direction from 7 and above, so weight 600 gets chosen for 7-9. */ 32 @font-face { 33 font-family: variable_axes; 34 src: url("resources/variabletest_matching.ttf"); 35 font-stretch: 125% 150%; 36 font-style: oblique 90deg; 37 font-weight: 500; 38 } 39 40 41 /* Matches 7 & 8 in stretch and weight, but has wrong style and in the wrong 42 search direction for 7 and above, gets chosen for 6. */ 43 @font-face { 44 font-family: variable_axes; 45 src: url("resources/variabletest_matching.ttf"); 46 font-stretch: 125% 150%; 47 font-style: oblique 20deg; 48 font-weight: 700 800; 49 } 50 </style> 51 <link rel="match" href="style-ranges-over-weight-direction-ref.html"> 52 <span id="stretch_style_weight_1">MNOP</span> 53 <span id="stretch_style_weight_2">MNOP</span> 54 <span id="stretch_style_weight_3">MNOP</span> 55 <span id="stretch_style_weight_4">MNOP</span> 56 <span id="stretch_style_weight_5">MNOP</span> 57 <span id="stretch_style_weight_6">MNOP</span> 58 <span id="stretch_style_weight_7">MNOP</span> 59 <span id="stretch_style_weight_8">MNOP</span> 60 <span id="stretch_style_weight_9">MNOP</span> 61 <script> 62 document.fonts.ready.then( 63 () => { document.documentElement.classList.remove("reftest-wait"); }); 64 </script> 65 </html>