fix: font-family will be filtered when using multiple fonts

try to close #8
qq15725 · Feb 15, 2023 · 2339842 · 2339842 · vercel · Feb 15, 2023
1 parent 9c3ff9f
commit 2339842
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 10 deletions.
diff --git a/src/clone-node.ts b/src/clone-node.ts
@@ -95,7 +95,7 @@ export function cloneNode<T extends Node>(
     }
 
     if (cloneStyle.fontFamily) {
-      fontFamilies.add(cloneStyle.fontFamily)
+      cloneStyle.fontFamily.split(',').forEach(val => fontFamilies.add(val))
     }
 
     copyPseudoContent(node, clone, ownerWindow)

diff --git a/src/embed-web-font.ts b/src/embed-web-font.ts
@@ -33,7 +33,7 @@ export async function embedWebFont<T extends Element>(
         .filter(rule => (
           isCssFontFaceRule(rule)
           && hasCssUrl(rule.style.getPropertyValue('src'))
-          && fontFamilies.has(rule.style.fontFamily)
+          && rule.style.fontFamily.split(',').some(val => fontFamilies.has(val))
         ))
         .forEach((value) => {
           const rule = value as CSSFontFaceRule

diff --git a/test/assets/font/font.css b/test/assets/font/font.css
@@ -3,7 +3,7 @@
   font-family: 'CustomFont';
   font-style: normal;
   font-weight: 400;
-  src: url(http://localhost:3000/test/assets/font/cyrillic-ext.woff2) format('woff2');
+  src: url(/test/assets/font/cyrillic-ext.woff2) format('woff2');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 
@@ -12,7 +12,7 @@
   font-family: 'CustomFont';
   font-style: normal;
   font-weight: 400;
-  src: url(http://localhost:3000/test/assets/font/cyrillic.woff2) format('woff2');
+  src: url(/test/assets/font/cyrillic.woff2) format('woff2');
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 
@@ -21,7 +21,7 @@
   font-family: 'CustomFont';
   font-style: normal;
   font-weight: 400;
-  src: url(http://localhost:3000/test/assets/font/hebrew.woff2) format('woff2');
+  src: url(/test/assets/font/hebrew.woff2) format('woff2');
   unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
 }
 
@@ -30,7 +30,7 @@
   font-family: 'CustomFont';
   font-style: normal;
   font-weight: 400;
-  src: url(http://localhost:3000/test/assets/font/latin-ext.woff2) format('woff2');
+  src: url(/test/assets/font/latin-ext.woff2) format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
@@ -39,6 +39,6 @@
   font-family: 'CustomFont';
   font-style: normal;
   font-weight: 400;
-  src: url(http://localhost:3000/test/assets/font/latin.woff2) format('woff2');
+  src: url(/test/assets/font/latin.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
diff --git a/test/fixtures/css.font-family.html b/test/fixtures/css.font-family.html
@@ -2,14 +2,24 @@
   @import url(__BASE_URL__/font/font.css);
 
   #root {
-    font-family: 'CustomFont';
-    font-size: 40px;
     width: 380px;
+    font-size: 40px;
+  }
+
+  .font-family-custom {
+    font-family: 'CustomFont';
+  }
+
+  .font-family-multiple {
+    font-family: -apple-system, SegoeUI, "Segoe UI", "Helvetica Neue", Helvetica, "Microsoft YaHei", "Meiryo UI", Meiryo, Arial Unicode MS, sans-serif;
   }
 </style>
 
 <template>
-  <div id="root">TEST TEMPLATE</div>
+  <div id="root">
+    <div class="font-family-custom">custom</div>
+    <div class="font-family-multiple">multiple</div>
+  </div>
 </template>
 
 <skip-expect />
diff --git a/test/fixtures/css.font-family.png b/test/fixtures/css.font-family.png
diff --git a/test/fixtures/network.cors.png b/test/fixtures/network.cors.png