font-size-adjust-003.xht (5547B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 5 <head> 6 7 <title>CSS Fonts Test: font-size-adjust - first available and installed font</title> 8 9 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> 10 <link rel="help" href="http://www.w3.org/TR/css-fonts-3/#font-size-adjust-prop" title="3.6 Relative sizing: the font-size-adjust property" /> 11 <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2013May/0384.html" title="[css3-fonts] font-size-adjust and em/ex values" /> 12 <link rel="bookmark" href="https://code.google.com/p/chromium/issues/detail?id=451346" title="Issue 451346: Add support for font-size-adjust" /> 13 <link rel="bookmark" href="https://bugs.webkit.org/show_bug.cgi?id=15257" title="Bug 15257: Support CSS 3 font-size-adjust" /> 14 15 <!-- 16 font-relative lengths are calculated against 17 the [computed? used?] font-size. 18 19 In situations where font fallback occurs, fallback fonts 20 may not share the same aspect ratio as the desired font 21 family and will thus appear less readable. The 22 font-size-adjust property is a way to preserve the 23 readability of text when font fallback occurs. It does 24 this by adjusting the font-size so that the x-height 25 is the same regardless of the font used. 26 http://lists.w3.org/Archives/Public/www-style/2013May/0384.html 27 28 "May I include your sample to my patch as a blink test case?" 29 https://code.google.com/p/chromium/issues/detail?id=451346#c6 30 Yes you can ... as long as my name is listed somewhere as the original author. 31 Gérard 32 33 It's "Oxygen-Sans" (with a hyphen!) and not "Oxygen Sans" 34 --> 35 36 <meta content="In this test, span.test's first 3 fallback fonts are unavailable and the next fallback fonts have a relatively big aspect value with regards to each fonts listed, declared in span.reference rule (0.450). This test checks that 'font-size-adjust' property adjusts the relative height of lowercase letters of available, installed fallback fonts listed, declared in span.test rule (0.530-0.545) to match the relative height of lowercase letters of fonts listed, declared in span.reference rule (0.450)." name="assert" /> 37 38 <meta name="DC.date.created" content="2015-01-01T09:54:03+11:00" scheme="W3CDTF" /> 39 <meta name="DC.date.modified" content="2017-03-22T09:54:03+11:00" scheme="W3CDTF" /> 40 41 <style type="text/css"><![CDATA[ 42 div.wrapper 43 { 44 font-size: 200px; 45 line-height: 1; 46 } 47 /* 48 The 'line-height: 1' declaration 49 is not part of the test. Its 50 sole purpose is to not increase 51 document box height unneedlessly. 52 */ 53 54 img 55 { 56 height: 1px; 57 margin-right: -100%; 58 width: 100%; 59 } 60 61 img.top-x-height 62 { 63 vertical-align: 90px; 64 } 65 /* 200px mult by 0.450 == 90px */ 66 67 img.baseline 68 { 69 vertical-align: -1px; 70 } 71 /* 72 We want the bottom green line to be flush with the bottom of 73 glyphs and not be overlapped by the bottom of glyphs. Therefore 74 this 'vertical-align: -1px' declaration. 75 */ 76 77 span.test 78 { 79 font-family: uninstalled, notavailable, bogus, "DejaVu Sans", "Oxygen-Sans", "Liberation Sans", Verdana, Tahoma; 80 /* 81 This test presumes that the tester will have at least 82 one of the following font installed on his/her operating system: 83 "DejaVu Sans", "Oxygen-Sans", "Liberation Sans", Verdana, Tahoma 84 */ 85 font-size-adjust: 0.450; 86 } 87 88 /* 89 List of 5 font faces with relatively big aspect values 90 91 DejaVu Sans' aspect value == 0.547 92 Oxygen-Sans' aspect value == 0.540 93 Liberation Sans' aspect value == 0.530 94 (DejaVu Sans, Oxygen-Sans and Liberation Sans are font 95 faces very often installed under Linux Debian-distributions) 96 97 Verdana's aspect value == 0.545 98 Tahoma's aspect value == 0.545 99 (Verdana and Tahoma are font faces very often pre-installed 100 under Windows operating systems.) 101 */ 102 103 span.reference 104 { 105 font-family: Rachana, "Nimbus Roman No9 L", "Times New Roman"; 106 } 107 108 /* 109 Rachana's aspect value == 0.450 110 Nimbus Roman No9 L's aspect value == 0.450 111 (Rachana and Nimbus Roman No9 L are font 112 faces often installed under Linux Debian-distributions) 113 114 Times New Roman's aspect value == 0.448 115 (Times New Roman is a font face is very often pre-installed 116 under Windows operating systems.) 117 */ 118 119 /* 120 This test presumes that the tester will have at least 121 one of the following font installed on his/her operating system: 122 Rachana, "Nimbus Roman No9 L", "Times New Roman" 123 */ 124 ]]></style> 125 126 </head> 127 128 <body> 129 130 <p>Test passes if each pair of "x" and "z" <strong>letters have the same height</strong>; the thin wide and bright green horizontal lines are not part of this test and only serve to help visually compare the height of tested pairs of letters.</p> 131 132 <div class="wrapper"> 133 <img class="top-x-height" src="support/1x1-lime.png" alt="Image download support must be enabled" /><img class="baseline" src="support/1x1-lime.png" alt="Image download support must be enabled" /> 134 <span class="test">x</span> 135 136 <span class="reference">x</span> 137 </div> 138 139 <div class="wrapper"> 140 <img class="top-x-height" src="support/1x1-lime.png" alt="Image download support must be enabled" /><img class="baseline" src="support/1x1-lime.png" alt="Image download support must be enabled" /> 141 <span class="test">z</span> 142 143 <span class="reference">z</span> 144 </div> 145 146 </body> 147 </html>