font-weight-matching-installed-fonts.html (3919B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Testing new font-matching algorithm for font-weight values introduced in CSS Fonts level 4 (for system fonts)</title> 5 <link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-matching-algorithm" /> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <!-- THIS TEST REQUIRES THAT YOU INSTALL THE [csstest-*.ttf] FONTS OF THE [resources] FOLDER --> 9 <style> 10 11 .testcase { 12 float:left; 13 margin: 5px; 14 font-size:48pt; 15 font-feature-settings: "kern" 1; 16 color: rgba(0,0,0,0.5); 17 background: linear-gradient(to left, lime 0%, lime 91px, red 91px); 18 } 19 20 @font-face { 21 font-family: fontMatch; 22 src: local('CSSTest Weights 900'); 23 font-weight: 100; 24 } 25 26 @font-face { 27 font-family: fontMatch; 28 src: local('CSSTest Weights 800'); 29 font-weight: 250; 30 } 31 32 @font-face { 33 font-family: fontMatch; 34 src: local('CSSTest Weights 700'); 35 font-weight: 400; 36 } 37 38 @font-face { 39 font-family: fontMatch; 40 src: local('CSSTest Weights 600'); 41 font-weight: 450; 42 } 43 44 @font-face { 45 font-family: fontMatch; 46 src: local('CSSTest Weights 300'); 47 font-weight: 500; 48 } 49 50 @font-face { 51 font-family: fontMatch; 52 src: local('CSSTest Weights 200'); 53 font-weight: 750; 54 } 55 56 @font-face { 57 font-family: fontMatch; 58 src: local('CSSTest Weights 100'); 59 font-weight: 900; 60 } 61 62 </style> 63 </head> 64 <body> 65 66 <span style="position: absolute; top: -100vh;"> 67 <span style="font-family: fontMatch; font-weight: 100;">A</span> 68 <span style="font-family: fontMatch; font-weight: 250;">A</span> 69 <span style="font-family: fontMatch; font-weight: 400;">A</span> 70 <span style="font-family: fontMatch; font-weight: 450;">A</span> 71 <span style="font-family: fontMatch; font-weight: 500;">A</span> 72 <span style="font-family: fontMatch; font-weight: 750;">A</span> 73 <span style="font-family: fontMatch; font-weight: 900;">A</span> 74 </span> 75 76 <div id="testcases" style="overflow: hidden"> 77 <!-- 78 These testcases work using the new kerned CSSTest Weights fonts. 79 The letter A and its corresponding numeric digit kern as one character. 80 --> 81 <div class="testcase" style="font-family:'CSSTest Weights W2569'; font-weight: 375;"> 82 A2 83 </div> 84 <div class="testcase" style="font-family:'CSSTest Weights Full'; font-weight: 375;"> 85 A3 86 </div> 87 <div class="testcase" style="font-family:'CSSTest Weights W1479'; font-weight: 475;"> 88 A4 89 </div> 90 <div class="testcase" style="font-family:'CSSTest Weights Full'; font-weight: 425;"> 91 A5 92 </div> 93 <div class="testcase" style="font-family:'CSSTest Weights Full'; font-weight: 525;"> 94 A6 95 </div> 96 <div class="testcase" style="font-family:'CSSTest Weights Full'; font-weight: 675;"> 97 A7 98 </div> 99 <br clear="all"> 100 </div> 101 102 <script> 103 104 var base_testcases = document.querySelectorAll('.testcase'); 105 for(var i = 0; i < base_testcases.length; i++) { 106 test( 107 assert => { assert_approx_equals(base_testcases[i].getBoundingClientRect().width, 90, 2, "@font-face should be mapped to " + base_testcases[i].style.fontFamily + "."); }, 108 "Test native font matching on " + base_testcases[i].style.fontFamily + " for weight " + base_testcases[i].style.fontWeight 109 ); 110 } 111 112 </script> 113 </body> 114 </html>