Add example for advance-override

Author: litherum

css-fonts-5/Overview.bs

@@ -177,9 +177,9 @@ Initial: normal
 
 The 'ascent-override', 'descent-override', and 'line-gap-override' descriptors define the
 <a spec="CSS-INLINE-3">ascent metric</a>, <a spec="CSS-INLINE-3">descent metric</a> and
-<a spec="CSS-INLINE-3">line gap metric</a> of the font, respectively. The `advance-override`
+<a spec="CSS-INLINE-3">line gap metric</a> of the font, respectively. The 'advance-override'
 descriptor adjusts the <dfn export>tracking</dfn> between adjacent
-<a spec="CSS-TEXT-3>typographic character units</a>.
+<a spec="CSS-TEXT-3">typographic character units</a>.
 
 When the descriptor value is 'normal', the corresponding metric value is obtained from the
 font file directly.
@@ -204,6 +204,38 @@ Note: 'ascent-override', 'descent-override', 'line-gap-override', and 'advance-o
 are applied per-font rather than per-element. Multiple fonts may be used
 within an individual element e.g. for characters not supported by the primary font.
 
+<div class="example">
+    Consider the following content:
+
+<xmp>
+@font-face {
+  font-family: "MyHelvetica";
+  src: local("Helvetica");
+}
+...
+<div style="font: 96px 'MyHelvetica';">Ha</div>
+</xmp>
+    This image shows each glyph's local origin, and the natural advance between them:
+    <figure>
+        <img alt="Natural advance of Helvetica glyphs" src="images/Helvetica Natural Advance.png" width="147" height="114">
+    </figure>
+    In this example, the natural advance is 69.328125 pixels.
+
+    However, if we modify the content as such:
+<pre>
+@font-face {
+  font-family: "MyHelvetica";
+  src: local("Helvetica");
+  advance-override: 140%;
+}
+</pre>
+   The rendering will look like this:
+    <figure>
+        <img alt="Overridden advance of Helvetica glyphs" src="images/Helvetica Overridden Advance.png" width="176" height="112">
+    </figure>
+    In this example, the used advance between the glyphs is 69.328125 pixels * 1.4 = 97.059375 pixels.
+</div>
+
 <div class="example">
 	The percentage is resolved against different font sizes for different elements.