diff --git a/after/syntax/css/css-fonts-4.vim b/after/syntax/css/css-fonts-4.vim
new file mode 100644
index 0000000..6e76e75
--- /dev/null
+++ b/after/syntax/css/css-fonts-4.vim
@@ -0,0 +1,4 @@
+syn match cssFontProp contained "\<font-optical-sizing\>"
+syn match cssFontProp contained "\<font-variation-settings\>"
+syn keyword cssFontAttr contained emoji math fangsong
+syn match cssFontAttr contained "\<system-ui\>"
diff --git a/after/syntax/html.vim b/after/syntax/html.vim
index 1055837..3103781 100644
--- a/after/syntax/html.vim
+++ b/after/syntax/html.vim
@@ -12,6 +12,7 @@ syn include @htmlCss syntax/css/css-display-3.vim
 syn include @htmlCss syntax/css/css-flexbox-1.vim
 syn include @htmlCss syntax/css/css-font-loading-3.vim
 syn include @htmlCss syntax/css/css-fonts-3.vim
+syn include @htmlCss syntax/css/css-fonts-4.vim
 syn include @htmlCss syntax/css/css-gcpm-3.vim
 syn include @htmlCss syntax/css/css-grid-1.vim
 syn include @htmlCss syntax/css/css-inline-3.vim
diff --git a/test/test.css b/test/test.css
index 09086ce..bd6e2f6 100644
--- a/test/test.css
+++ b/test/test.css
@@ -286,6 +286,13 @@
   display: proportional-width;
 }
 
+.fonts-4 {
+  font-optical-sizing: emoji;
+  font-variation-settings: math;
+  display: fangsong;
+  display: system-ui;
+}
+
 .gcpm-3::footnote-call,
 .gcpm-3::footnote-marker {
   running: footnote;
diff --git a/test/test.html b/test/test.html
index b6c9121..1678830 100644
--- a/test/test.html
+++ b/test/test.html
@@ -318,6 +318,14 @@
 }
 </style>
 <style>
+.fonts-4 {
+  font-optical-sizing: emoji;
+  font-variation-settings: math;
+  display: fangsong;
+  display: system-ui;
+}
+</style>
+<style>
 .gcpm-3::footnote-call,
 .gcpm-3::footnote-marker {
   running: footnote;