@@ -59,7 +59,7 @@ Basic Font Properties</h2>
5959Issue(126):
6060
6161<h3 id="font-family-prop">
62- Font family: the 'font-family!!property' property</h3>
62+ Font family: the 'font-family!!property' property</h3>
6363
6464<h4 id="generic-font-families">
6565Generic font families</h4>
@@ -75,8 +75,6 @@ Issue(5054):
7575 <dt id="xxx-def"> <dfn>xxx</dfn>
7676 <dd>
7777 Placeholder text for the xxx generic font family.
78-
79-
8078 </dl>
8179
8280Issue(4566):
@@ -118,11 +116,11 @@ Issue(731):
118116Issue(5892):
119117
120118<pre class='descdef'>
121- Name : font-size
122- Value : auto | <<number>>{1,2}
123- Initial : normal
124- For : @font-face
125- </pre>
119+ Name : font-size
120+ Value : auto | [ <<number>>] {1,2}
121+ Initial : normal
122+ For : @font-face
123+ </pre>
126124
127125<dl dfn-type="value" dfn-for="@font-face/font-size">
128126 <dt> <dfn>auto</dfn> </dt>
@@ -231,53 +229,51 @@ within an individual element e.g. for characters not supported by the primary fo
231229<div class="example">
232230 The percentage is resolved against different font sizes for different elements.
233231
234- <pre>
235- @font-face {
236- font-family: overridden-font;
237- ascent-override: 50%;
238- ...
239- }
240-
241- <span style="font-family: overridden-font; font-size: 20px;">
242- Outer span content
243- <span style="font-size: 150%;">Inner span content</span>
244- </span>
245- </pre>
232+ <pre>
233+ @font-face {
234+ font-family: overridden-font;
235+ ascent-override: 50%;
236+ ...
237+ }
238+
239+ <span style="font-family: overridden-font; font-size: 20px;">
240+ Outer span content
241+ <span style="font-size: 150%;">Inner span content</span>
242+ </span>
243+ </pre>
246244
247245 The outer span uses an <a spec="CSS-INLINE-3" lt="ascent metric">ascent</a> value of
248246 10px, whereas the inner span uses 15px.
249-
250247</div>
251248
252249<div class="example">
253250 We may override the metrics of a local fallback font to match the primary font, which
254251 is a web font. This reduces layout shifting when switching from fallback to the
255252 primary font.
256253
257- <pre>
258- @font-face {
259- font-family: cool-web-font;
260- src: url("https://example.com/font.woff");
261- }
262-
263- @font-face {
264- font-family: fallback-to-local;
265- src: local(Some Local Font);
266- /* Override metric values to match cool-web-font */
267- ascent-override: 125%;
268- descent-override: 25%;
269- line-gap-override: 0%;
270- size-adjust: 96%;
271- }
272-
273- <div style="font-family: cool-web-font, fallback-to-local">Title goes here</div>
274- <img src="https://example.com/largeimage" alt="A large image that you don't want to shift">
275- </pre>
254+ <pre>
255+ @font-face {
256+ font-family: cool-web-font;
257+ src: url("https://example.com/font.woff");
258+ }
259+
260+ @font-face {
261+ font-family: fallback-to-local;
262+ src: local(Some Local Font);
263+ /* Override metric values to match cool-web-font */
264+ ascent-override: 125%;
265+ descent-override: 25%;
266+ line-gap-override: 0%;
267+ size-adjust: 96%;
268+ }
269+
270+ <div style="font-family: cool-web-font, fallback-to-local">Title goes here</div>
271+ <img src="https://example.com/largeimage" alt="A large image that you don't want to shift">
272+ </pre>
276273
277274 The image will not be shifted as much when the user agent finishes loading and
278275 switches to use the web font (assuming the override values are similar to the web font's
279- natural metrics).
280-
276+ natural metrics).
281277</div>
282278
283279<h3 id="font-sup-sub-override-desc">
0 commit comments