Update Overview.bs

Author: xiaochengh

css-fonts-4/Overview.bs

@@ -2947,27 +2947,52 @@ When the descriptor value is a percentage, the corresponding metric value is res
 given percentage multiplied by the used font size. Negative values are invalid at parse time.
 
 <div class="example">
-	We may override the metrics of Arial as follows:
+	The percentage is resolved against different font sizes for different elements.
 
-<pre>@font-face {
-  font-family: arial;
-  src: local(Arial), url("http://example.com/arial.woff");
-  ascent-override: 80%;
-  descent-override: 20%;
-  line-gap-override: 0%;
+<pre>
+@font-face {
+  font-family: overridden-font;
+  ascent-override: 50%;
+  ...
 }
+
+&lt;span style="font-family: overridden-font; font-size: 20px;"&gt;
+  Outer span content
+  &lt;span style="font-size: 150%;"&gt;Inner span content&lt;/span&gt;
+&lt;/span&gt;
 </pre>
 
-	Then for an element with the following style:
+	The outer span uses an <a spec="CSS-INLINE-3" lt="ascent metric">ascent</a> value of
+	10px, whereas the inner span uses 15px.
+
+</div>
+
+<div class="example">
+	We may override the metrics of a local fallback font to match the primary font, which
+	is a web font. This reduces layout shifting when switching from fallback to the
+	primary font.
 
 <pre>
-font-family: arial;
-font-size: 20px;
-line-height: normal;
+@font-face {
+  font-family: cool-web-font;
+  src: url("https://example.com/font.woff");
+}
+
+@font-face {
+  font-family: fallback-to-local;
+  src: local(Some Local Font);
+  /* Override metric values to match cool-web-font */
+  ascent-override: 125%;
+  descent-override: 25%;
+  line-gap-override: 0%;
+}
+
+&lt;div style="font-family: cool-web-font, fallback-to-local"&gt;Title goes here&lt;/div&gt;
+&lt;img src="https://example.com/largeimage" alt="A large image that you don't want to shift"&gt;
 </pre>
 
-	Each line box will be exactly 20px high. Text baseline will be positioned at 16px
-	below line box top.
+	The image will not be vertically shifted when the user agent finishes loading and
+	switches to use the web font.
 
 </div>