fix: add generic font-family fallbacks in demo (SonarCloud css:S4649)

Each font-family in assets/demo/showcase.html named only a specific font with
no generic fallback. Add an appropriate generic (serif/sans-serif/monospace/
cursive/math) so text still renders if the specific face is unavailable.

assets/demo/showcase.html

@@ -401,12 +401,12 @@ a.box { position: absolute; display: block; color: transparent; font-size: 1pt;
   </div>
   <h3>The families in this specimen</h3>
   <div class="families">
-    <div><span style="font-family:'PC Playfair'">Ag</span><b>Playfair Display</b>Display</div>
-    <div><span style="font-family:'PC Garamond'">Ag</span><b>EB Garamond</b>Body text</div>
-    <div><span style="font-family:'PC Inter';font-weight:500">Ag</span><b>Inter</b>Labels</div>
-    <div><span style="font-family:'PC Mono'">Ag</span><b>JetBrains Mono</b>Code</div>
-    <div><span style="font-family:'PC Vibes'">Ag</span><b>Great Vibes</b>Script</div>
-    <div><span style="font-family:'PC Math'">∑x</span><b>STIX Two Math</b>Mathematics</div>
+    <div><span style="font-family:'PC Playfair', serif">Ag</span><b>Playfair Display</b>Display</div>
+    <div><span style="font-family:'PC Garamond', serif">Ag</span><b>EB Garamond</b>Body text</div>
+    <div><span style="font-family:'PC Inter', sans-serif;font-weight:500">Ag</span><b>Inter</b>Labels</div>
+    <div><span style="font-family:'PC Mono', monospace">Ag</span><b>JetBrains Mono</b>Code</div>
+    <div><span style="font-family:'PC Vibes', cursive">Ag</span><b>Great Vibes</b>Script</div>
+    <div><span style="font-family:'PC Math', math">∑x</span><b>STIX Two Math</b>Mathematics</div>
   </div>
   <div class="folio"><span>Foreword</span><b>ii</b></div>
 </section>
@@ -449,7 +449,7 @@ a.box { position: absolute; display: block; color: transparent; font-size: 1pt;
     <tr><td class="tag">onum</td><td class="lbl">Old-style figures</td><td class="off" style="font-feature-settings:'lnum' 1">Since 1885: 3,467,920</td><td class="on" style="font-feature-settings:'onum' 1">Since 1885: 3,467,920</td></tr>
     <tr><td class="tag">frac</td><td class="lbl">Fractions</td><td class="off" style="font-family:var(--ui)">1/2 cup, 3/4 inch, 7/8</td><td class="on" style="font-family:var(--ui);font-feature-settings:'frac' 1">1/2 cup, 3/4 inch, 7/8</td></tr>
     <tr><td class="tag">swsh</td><td class="lbl">Swash capitals</td><td class="off" style="font-style:italic">The Quiet River</td><td class="on" style="font-style:italic;font-feature-settings:'swsh' 1">The Quiet River</td></tr>
-    <tr><td class="tag">ss01</td><td class="lbl">Stylistic set 1</td><td class="off" style="font-family:'PC Inter'">a 1 4 6 9 G ?</td><td class="on" style="font-family:'PC Inter';font-feature-settings:'ss01' 1">a 1 4 6 9 G ?</td></tr>
+    <tr><td class="tag">ss01</td><td class="lbl">Stylistic set 1</td><td class="off" style="font-family:'PC Inter', sans-serif">a 1 4 6 9 G ?</td><td class="on" style="font-family:'PC Inter', sans-serif;font-feature-settings:'ss01' 1">a 1 4 6 9 G ?</td></tr>
     <tr><td class="tag">kern</td><td class="lbl">Kerning</td><td class="off" style="font-kerning:none;font-family:var(--sans)">AVATAR Type Wave</td><td class="on" style="font-kerning:normal;font-family:var(--sans)">AVATAR Type Wave</td></tr>
     <tr><td class="tag">tnum</td><td class="lbl">Tabular figures</td><td class="off" style="font-family:var(--ui);font-feature-settings:'pnum' 1">1111 / 8888</td><td class="on" style="font-family:var(--ui);font-feature-settings:'tnum' 1">1111 / 8888</td></tr>
   </table>
@@ -519,9 +519,9 @@ a.box { position: absolute; display: block; color: transparent; font-size: 1pt;
   <p class="dek">A short greeting &mdash; roughly, &ldquo;every letter deserves a good home&rdquo; &mdash; in writing systems that need bidirectional layout, contextual shaping, reordering and vertical setting.</p>
   <div style="display:grid;grid-template-columns:1fr 1in;gap:16pt">
   <div class="scripts">
-    <div class="sc" lang="ar" dir="rtl"><div class="nm" dir="ltr">Arabic <i>RTL &middot; joining</i></div><div class="tx" style="font-family:'PC Amiri'">لكل حرف بيت</div><div class="en" dir="ltr">Amiri</div></div>
+    <div class="sc" lang="ar" dir="rtl"><div class="nm" dir="ltr">Arabic <i>RTL &middot; joining</i></div><div class="tx" style="font-family:'PC Amiri', serif">لكل حرف بيت</div><div class="en" dir="ltr">Amiri</div></div>
     <div class="sc" lang="he" dir="rtl"><div class="nm" dir="ltr">Hebrew <i>RTL</i></div><div class="tx" style="font-family:'PC Hebrew',sans-serif">לכל אות יש בית טוב</div><div class="en" dir="ltr">Noto Sans Hebrew</div></div>
-    <div class="sc" lang="hi"><div class="nm">Devanagari <i>conjuncts</i></div><div class="tx" style="font-family:'PC Devanagari'">हर अक्षर का घर</div><div class="en">Noto Sans Devanagari</div></div>
+    <div class="sc" lang="hi"><div class="nm">Devanagari <i>conjuncts</i></div><div class="tx" style="font-family:'PC Devanagari', sans-serif">हर अक्षर का घर</div><div class="en">Noto Sans Devanagari</div></div>
     <div class="sc" lang="th"><div class="nm">Thai <i>no spaces</i></div><div class="tx" style="font-family:'PC Thai',sans-serif">ทุกอักษรมีบ้าน</div><div class="en">Noto Sans Thai</div></div>
     <div class="sc" lang="el"><div class="nm">Greek <i>polytonic</i></div><div class="tx" style="font-family:'PC Garamond',serif">Κάθε γράμμα ἔχει σπίτι</div><div class="en">EB Garamond</div></div>
     <div class="sc" lang="ru"><div class="nm">Cyrillic</div><div class="tx" style="font-family:'PC Garamond',serif">Каждой букве — дом</div><div class="en">EB Garamond</div></div>
@@ -541,7 +541,7 @@ a.box { position: absolute; display: block; color: transparent; font-size: 1pt;
   </div>
 
   <h3>Mixed direction in one line</h3>
-  <p style="font-size:12pt;margin:0">The word <span lang="ar" style="font-family:'PC Amiri'">كتاب</span> means &ldquo;book&rdquo;, and <span lang="he" style="font-family:'PC Hebrew'">ספר</span> does too &mdash; the bidi algorithm keeps each run in its own direction while the sentence stays left-to-right, even across numbers like <span lang="ar" style="font-family:'PC Amiri'">٣٤٥</span> and 345.</p>
+  <p style="font-size:12pt;margin:0">The word <span lang="ar" style="font-family:'PC Amiri', serif">كتاب</span> means &ldquo;book&rdquo;, and <span lang="he" style="font-family:'PC Hebrew', serif">ספר</span> does too &mdash; the bidi algorithm keeps each run in its own direction while the sentence stays left-to-right, even across numbers like <span lang="ar" style="font-family:'PC Amiri', serif">٣٤٥</span> and 345.</p>
 
   <h3>Colour emoji</h3>
   <div class="emoji">📄🖋️🎨📐🔍🌍🧮✅🦀📎</div>