font-weight-search-direction.html (2347B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 4 <title>CSS Fonts 4: Font matching algorithm</title> 5 <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"/> 6 <link rel="help" href="https://drafts.csswg.org/css-fonts/#font-style-matching"> 7 <link rel=match href="font-weight-search-direction-ref.html"> 8 <meta name="assert" content="If the desired weight is greater than 500, 9 weights greater than or equal to the desired weight are checked in ascending order 10 followed by weights below the desired weight in descending order 11 until a match is found."> 12 13 <style> 14 @font-face { 15 font-family: "simple"; 16 font-weight: normal; 17 src: url("/fonts/Lato-Medium.ttf"); 18 } 19 @font-face { 20 font-family: "simple"; 21 font-weight: bold; 22 src: url("/fonts/Lato-Bold.ttf"); 23 } 24 </style> 25 26 <!-- The "simple" family has just normal and bold weights; check that various 27 font-weight values select the expected face. --> 28 <div style='font: 100 24px "simple"'>This should be normal weight</div> 29 <div style='font: 400 24px "simple"'>This should be normal weight</div> 30 <div style='font: 499 24px "simple"'>This should be normal weight</div> 31 <div style='font: 500 24px "simple"'>This should be normal weight</div> 32 <div style='font: 501 24px "simple"'>This should be bold weight</div> 33 <div style='font: 600 24px "simple"'>This should be bold weight</div> 34 <div style='font: 700 24px "simple"'>This should be bold weight</div> 35 <div style='font: 900 24px "simple"'>This should be bold weight</div> 36 37 <br> 38 39 <!-- If the Times New Roman family is present, it normally has the "standard 4" faces, 40 so should behave similarly. --> 41 <div style='font: 100 24px "Times New Roman", "simple"'>This should be normal weight</div> 42 <div style='font: 400 24px "Times New Roman", "simple"'>This should be normal weight</div> 43 <div style='font: 499 24px "Times New Roman", "simple"'>This should be normal weight</div> 44 <div style='font: 500 24px "Times New Roman", "simple"'>This should be normal weight</div> 45 <div style='font: 501 24px "Times New Roman", "simple"'>This should be bold weight</div> 46 <div style='font: 600 24px "Times New Roman", "simple"'>This should be bold weight</div> 47 <div style='font: 700 24px "Times New Roman", "simple"'>This should be bold weight</div> 48 <div style='font: 900 24px "Times New Roman", "simple"'>This should be bold weight</div>