feat(css): Update syntax for font (#992)

* feat(css): Update syntax for `font`

* Apply suggestions from code review

Author: skyclouds2001

css/properties.json

@@ -4965,7 +4965,7 @@
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/flood-opacity"
   },
   "font": {
-    "syntax": "[ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar",
+    "syntax": "[ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'># ] | <system-family-name>",
     "media": "visual",
     "inherited": true,
     "animationType": [

css/syntaxes.json

@@ -386,12 +386,15 @@
   "font-stretch-absolute": {
     "syntax": "normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage>"
   },
-  "font-variant-css21": {
-    "syntax": "[ normal | small-caps ]"
+  "font-variant-css2": {
+    "syntax": "normal | small-caps"
   },
   "font-weight-absolute": {
     "syntax": "normal | bold | <number [1,1000]>"
   },
+  "font-width-css3": {
+    "syntax": "normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded"
+  },
   "form-control-identifier": {
     "syntax": "select"
   },
@@ -1010,6 +1013,9 @@
   "system-color": {
     "syntax": "AccentColor | AccentColorText | ActiveText | ButtonBorder | ButtonFace | ButtonText | Canvas | CanvasText | Field | FieldText | GrayText | Highlight | HighlightText | LinkText | Mark | MarkText | SelectedItem | SelectedItemText | VisitedText"
   },
+  "system-family-name": {
+    "syntax": "caption | icon | menu | message-box | small-caption | status-bar"
+  },
   "tan()": {
     "syntax": "tan( <calc-sum> )"
   },