chore: Wasm uses the same logic as Node.js to find the default font f…

…amily

The main addition here is the judgment that `fontdb_found_default_font_family` is empty.

.github/workflows/CI.yaml

@@ -199,7 +199,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node: ['18']
+        node: ['14', '16', '18']
     runs-on: ubuntu-latest
 
     steps:

__test__/index.spec.ts

@@ -236,7 +236,6 @@ test('should be load custom fontFiles(no defaultFontFamily option)', (t) => {
     font: {
       fontFiles: ['./example/SourceHanSerifCN-Light-subset.ttf'],
       loadSystemFonts: false,
-      // defaultFontFamily: 'Source Han Serif CN Light',
     },
     logLevel: 'debug',
   })
@@ -261,7 +260,6 @@ test('should be load custom fontDirs(no defaultFontFamily option)', (t) => {
       // loadSystemFonts: false,
       // defaultFontFamily: 'Source Han Serif CN Light',
     },
-    logLevel: 'debug',
   })
   const pngData = resvg.render()
   const originPixels = pngData.pixels.toJSON().data
@@ -282,7 +280,7 @@ test('The defaultFontFamily is not found in the OS and needs to be fallback', (t
     font: {
       loadSystemFonts: true,
       fontDirs: ['/usr/share/fonts/'], // 防止在 CI 的 Docker 环境找不到字体
-      defaultFontFamily: 'this-is-a-non-existent-font-family',
+      defaultFontFamily: 'non-existent-font-family',
     },
     logLevel: 'debug',
   })
@@ -325,7 +323,7 @@ test('Async rendering', async (t) => {
     font: {
       fontFiles: ['./example/SourceHanSerifCN-Light-subset.ttf'], // Load custom fonts.
       loadSystemFonts: false, // It will be faster to disable loading system fonts.
-      defaultFontFamily: 'Source Han Serif CN Light',
+      defaultFontFamily: '  Source Han Serif CN Light ',
     },
   }
   let syncRenderingResult = new Resvg(svg, params)

__test__/wasm.spec.ts

@@ -265,6 +265,30 @@ test('should be load custom fontsBuffers(no defaultFontFamily option)', async (t
   t.is(originPixels.join(',').match(/0,0,255/g)?.length, 1726)
 })
 
+test('should be load custom multiple fontsBuffers', async (t) => {
+  const svg = `
+  <svg xmlns="http://www.w3.org/2000/svg" width="500" height="200" viewBox="0 0 500 200">
+    <text fill="blue" font-size="60">
+      <tspan x="40" y="80">竹外桃花三两枝</tspan>
+      <tspan x="40" y="160">Hello resvg-js</tspan>
+    </text>
+  </svg>
+  `
+  const fontBuffer = await fs.readFile(join(__dirname, '../example/SourceHanSerifCN-Light-subset.ttf'))
+  const pacificoBuffer = await fs.readFile(join(__dirname, './Pacifico-Regular.ttf'))
+  const resvg = new Resvg(svg, {
+    font: {
+      fontsBuffers: [pacificoBuffer, fontBuffer],
+      defaultFontFamily: ' Pacifico  ', // Multiple spaces
+    },
+  })
+  const pngData = resvg.render()
+  const originPixels = Array.from(pngData.pixels)
+
+  // Find the number of blue `rgb(0,255,255)`pixels
+  t.is(originPixels.join(',').match(/0,0,255/g)?.length, 8938)
+})
+
 test('should generate a 80x80 png and opaque', async (t) => {
   const svg = `<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <rect fill="green" x="0" y="0" width="100" height="100"></rect>
@@ -398,7 +422,7 @@ test('should render using font buffer provided by options', async (t) => {
   const options = {
     font: {
       fontsBuffers: [pacificoBuffer],
-      // defaultFontFamily: 'Pacifico',
+      defaultFontFamily: 'non-existent-font-family',
     },
   }
 

src/fonts.rs

@@ -122,34 +122,25 @@ fn set_wasm_font_families(
     fontdb: &mut Database,
     fonts_buffers: Option<js_sys::Array>,
 ) {
-    let mut default_font_family = font_options.default_font_family.clone();
-    let fallback_font_family = "Arial".to_string(); // 其他情况都 fallback 到指定的这个字体。
-
-    // 当默认字体为空时，尝试直接从 font_files 中加载读取字体名称，然后设置到默认的 font-family 中
-    if font_options
-        .default_font_family
-        .to_string()
-        .trim()
-        .is_empty()
-    {
+    let mut default_font_family = font_options.default_font_family.clone().trim().to_string();
+
+    let fontdb_found_default_font_family = fontdb
+        .faces()
+        .iter()
+        .find_map(|it| {
+            it.families
+                .iter()
+                .find(|f| f.0 == default_font_family)
+                .map(|f| f.0.clone())
+        })
+        .unwrap_or_default();
+
+    // 当 default_font_family 为空或系统无该字体时，尝试把 fontdb
+    // 中字体列表的第一个字体设置为默认的字体。
+    if default_font_family.is_empty() || fontdb_found_default_font_family.is_empty() {
+        // fonts_buffers 选项不为空时, 从已加载的字体列表中获取第一个字体的 font family。
         if let Some(_fonts_buffers) = fonts_buffers {
-            // 获取字体列表中第一个字体的 font family。
-            match fontdb.faces().iter().next() {
-                Some(face) => {
-                    let new_family = face
-                        .families
-                        .iter()
-                        .find(|f| f.1 == Language::English_UnitedStates)
-                        .unwrap_or(&face.families[0]);
-
-                    default_font_family = new_family.0.clone();
-                }
-                None => {
-                    default_font_family = fallback_font_family;
-                }
-            }
-        } else {
-            default_font_family = fallback_font_family;
+            default_font_family = get_first_font_family_or_fallback(fontdb);
         }
     }
 
@@ -200,7 +191,6 @@ fn find_and_debug_font_path(fontdb: &mut Database, font_family: &str) {
 }
 
 /// 获取 fontdb 中的第一个字体的 font family。
-#[cfg(not(target_arch = "wasm32"))]
 fn get_first_font_family_or_fallback(fontdb: &mut Database) -> String {
     let mut default_font_family = "Arial".to_string(); // 其他情况都 fallback 到指定的这个字体。
 
@@ -215,6 +205,7 @@ fn get_first_font_family_or_fallback(fontdb: &mut Database) -> String {
             default_font_family = base_family.0.clone();
         }
         None => {
+            #[cfg(not(target_arch = "wasm32"))]
             debug!(
                 "📝 get_first_font_family not found = '{}'",
                 default_font_family