[css-fonts-4] Expand generic font family list to include new generic font families

Author: litherum

css-fonts-4/Overview.bs

@@ -249,6 +249,38 @@ other.</p>
 
 	<div class="figure"><img alt="sample monospace fonts" src="monospaceexamples.png" /><p class="caption">Sample monospace fonts</p></div>
 
+	<h5 class="no-num no-toc"> <span class="index-def" title="system-ui, definition of">
+	<a name="system-ui-def"><dfn>system-ui</dfn></a></span></h5>
+
+	This generic font family is intended to let text render with the default user interface font on the platform on which the UA is running. A cross-platform UA should use different fonts on its different supported platforms. The purpose of 'system-ui' is to allow web content to integrate with the look and feel of a native app. On platforms which have a collection of system user interface fonts (e.g. for different languages), user agents may treat 'system-ui' as a virtual font which encompasses all the platform user interface fonts. However, if this is done, the details of the virtual font must not be visible or detectable.
+
+	<div class="example">
+	<pre>
+	&lt;div id="system-text" style="font-family: system-ui"&gt;&lt;/div&gt;
+	...
+	window.getComputedStyle(document.getElementById("system-text")).getPropertyValue("font-family");
+	</pre>
+	The script above should not have any knowledge if 'system-ui' is expanded to include a collection of system user interface fonts. In particular, the above script should yield a result of "system-ui" on every platform.
+	</div>
+
+	Issue: Add ''system-ui'' fingerprinting issue to Security and Privacy Considerations section
+	per <a href="https://lists.w3.org/Archives/Public/www-style/2015Aug/0051.html">discussion</a>.
+
+	<h5 class="no-num no-toc"> <span class="index-def" title="emoji, definition of">
+	<a name="emoji-def"><dfn>emoji</dfn></a></span></h5>
+
+	This font family is intended for use with emoji characters.
+
+	<h5 class="no-num no-toc"> <span class="index-def" title="math, definition of">
+	<a name="math-def"><dfn>math</dfn></a></span></h5>
+
+	This font family is intended for use with mathematical expressions.
+
+	<h5 class="no-num no-toc"> <span class="index-def" title="fangsong, definition of">
+	<a name="math-def"><dfn>fangsong</dfn></a></span></h5>
+
+	This font family is used for fang song typefaces in Chinese.
+
 <h3 id="font-weight-prop">Font weight: the 'font-weight' property</h3>
 
 	<pre class="propdef">
@@ -1726,29 +1758,6 @@ at least as dark as its predecessor. Only values between 1 - 999 are valid, and
 <p>Define new properties to control the minimum and maximum font-size,
 <code>min-font-size</code> and <code>max-font-size</code>.</p>
 
-<h2 id="extended-generics">New generic font families</h2>
-
-<p>For most languages and scripts, existing generics can be mapped to
-something comparable to that script. That's useful for the web so that
-generics like <code>serif</code> and <code>sans-serif</code> map to
-something reasonable independent of the language of the content. But
-typographic traditions vary widely across the world and many scripts
-have a variety of common typeface designs that don't map cleanly
-into these existing generics. In situations where a similar typeface is
-used across a wide variety of platforms, it's useful to extend the set
-of predefined CSS generic font families to cover these type styles.</p>
-
-<p>Add new generic font families for:</p>
-<ul dfn-for=font-family dfn-type=value>
-<li><dfn>system-ui</dfn> font family representing the default UI font on a given platform</li>
-<li><dfn>emoji</dfn> font family for emoji characters</li>
-<li><dfn>math</dfn> font family used for rendering mathematical expressions</li>
-<li><dfn>fangsong</dfn> font family used for <em>fang song</em> typefaces in Chinese</li>
-</ul>
-
-Issue: Add ''system-ui'' fingerprinting issue to Security and Privacy Considerations section
-per <a href="https://lists.w3.org/Archives/Public/www-style/2015Aug/0051.html">discussion</a>.
-
 <h2 id="emoji-fallback">Font fallback for emoji codepoints</h2>
 
 <p>Many codepoints supported by emoji fonts overlap with codepoints supported