Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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.
"May I include your sample to my patch as a blink test case?"
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>