[css-fonts-4] Correct and autolink syntax of generic-family, fix w3c#10551

Author: svgeesus

css-fonts-4/Overview.bs

@@ -218,7 +218,7 @@ Font family: the 'font-family!!property' property</h3>
 
 			This might be a locally-instaled font, or might be a web font.
 
-	    <dt><dfn id="generic-family-value"><<generic-family>></dfn>
+	    <dt><<generic-family>>
 	    <dd>
 	        Each <<generic-family>> keyword represents
 	        a generic font choice,
@@ -367,11 +367,23 @@ Syntax of <<family-name>>
 Syntax of <<generic-family>>
 </h4>
 
-	<pre class=prod><l><<generic-family>></l> = generic( <<custom-ident>>+ ) | <<string>> | <<custom-ident>>+</pre>
+	<!-- <pre class=prod>
+		<dfn><<generic-family>></dfn> = generic(<<generic-script-specific>>) | <<generic-complete>> | <<generic-incomplete>>`
+		<dfn><<generic-script-specific>></dfn> = <a href="">kai</a> | fangsong | nastaliq 
+		<dfn><<generic-complete>></dfn> = serif | sans-serif | system-ui | cursive | fantasy | math
+		<dfn><<generic-incomplete>></dfn> = ui-serif | ui-sans-serif | ui-monospace | ui-rounded 
+</pre> -->
+
+<pre class=prod>
+	<dfn><<generic-family>></dfn> = <<generic-script-specific>>| <<generic-complete>> | <<generic-incomplete>>`
+	<dfn><<generic-script-specific>></dfn> = ''generic(kai)'' | ''generic(fangsong)'' | ''generic(nastaliq)''
+	<dfn><<generic-complete>></dfn> = ''serif'' | ''sans-serif'' | ''system-ui'' | ''cursive'' | ''fantasy'' | ''math''
+	<dfn><<generic-incomplete>></dfn> = ''ui-serif'' | ''ui-sans-serif'' | ''ui-monospace'' | ''ui-rounded''
+</pre>
 
-	<div class="example" id="ex-generic-functional">
-		More recently defined generic font families are identified using a functional syntax:
+	To make the syntax less succeptible to clashes, more recently defined generic font families are identified using a functional syntax.
 
+	<div class="example" id="ex-generic-functional">
 		<pre>
 			body { font-family: "Adobe Fangsong Std R", generic(fangsong), serif}
 		</pre>