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