Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-fonts/first-available-font-004.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS-fonts: first available font and the strut</title>
<link rel="match" href="first-available-font-003-ref.html">
<meta name="assert" content="The strut, which impacts the line height, is taken from the primary font, which is the first font to include the U+0020 character.
The fact that that font is used somewhere else in the page makes no difference.">
<style>
/* Two arbitrary fonts with different metrics */
@font-face {
font-family: 'A';
font-style: normal;
font-weight: 400;
src: url(/fonts/Revalia.woff) format('woff');
}
@font-face {
font-family: 'B-no-space';
font-style: normal;
font-weight: 400;
src: url(/fonts/AD.woff) format('woff');
unicode-range: U+0062;
}
div {
position: absolute;
line-height: normal;
font-size: 100px;
color: transparent;
border: solid black 1px;
width: 100px;
}
.a { font-family: A; }
.ba { font-family: B-no-space, A; margin-left: 100px; }
.loader { font-family: B-no-space; border: none; }
</style>
<p>There should be <strong>two identically sized rectangles</strong> below.
<div class=loader>b</div>
<!-- Both divs show the same content with the same font,
but the first div has an unused font earlier in the list,
while the second one does not.
However, that font does not include the U+0020 character,
and can therefore not be the first available font.
If it had been, it would affect the height of the strut,
making the height different.
Since it is not, both boxes are expected to be the same height. -->
<div class="ba">a</div>
<div class="a">a</div>