fix: should handle font-size correctly for element like heading

src/handler/expand.ts

@@ -301,25 +301,10 @@ export default function expand(
   }
 
   // Calculate the base font size.
-  let baseFontSize: number =
-    typeof transformedStyle.fontSize === 'number'
-      ? transformedStyle.fontSize
-      : inheritedStyle.fontSize
-  if (typeof baseFontSize === 'string') {
-    try {
-      const parsed = new CssDimension(baseFontSize)
-      switch (parsed.unit) {
-        case 'em':
-          baseFontSize = parsed.value * (inheritedStyle.fontSize as number)
-          break
-        case 'rem':
-          baseFontSize = parsed.value * 16
-          break
-      }
-    } catch (err) {
-      baseFontSize = 16
-    }
-  }
+  const baseFontSize = calcBaseFontSize(
+    transformedStyle.fontSize,
+    inheritedStyle.fontSize as number
+  )
   if (typeof transformedStyle.fontSize !== 'undefined') {
     transformedStyle.fontSize = baseFontSize
   }
@@ -393,6 +378,24 @@ export default function expand(
   return transformedStyle
 }
 
+function calcBaseFontSize(size: number | string, inheritedSize: number) {
+  if (typeof size === 'number') return size
+
+  try {
+    const parsed = new CssDimension(size)
+    switch (parsed.unit) {
+      case 'em':
+        return parsed.value * inheritedSize
+        break
+      case 'rem':
+        return parsed.value * 16
+        break
+    }
+  } catch (err) {
+    return inheritedSize
+  }
+}
+
 /**
  * @see https://github.com/RazrFalcon/resvg/issues/579
  */

test/font.test.tsx

@@ -103,12 +103,47 @@ describe('Font', () => {
         Hello
       </div>,
       {
-        width: 100,
-        height: 100,
+        width: 300,
+        height: 300,
         fonts: [montserratFont],
       }
     )
 
-    expect(toImage(svg, 100)).toMatchImageSnapshot()
+    expect(toImage(svg, 300)).toMatchImageSnapshot()
+  })
+
+  it('should handle font-size correctly for element like heading', async () => {
+    const [pxSvg, emSvg, remSvg] = await Promise.all(
+      [20, '1.5em', '2rem'].map((fontSize) =>
+        satori(
+          <div
+            style={{
+              height: '100%',
+              width: '100%',
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: '#fff',
+              fontSize,
+              fontWeight: 600,
+            }}
+          >
+            <h1 style={{ color: 'red' }}>Hello, World</h1>
+            <h2 style={{ color: 'orange' }}>Hello, World</h2>
+            <h5 style={{ color: 'grey', fontSize: 20 }}>Hello, World</h5>
+          </div>,
+          {
+            width: 400,
+            height: 400,
+            fonts,
+          }
+        )
+      )
+    )
+
+    expect(toImage(pxSvg, 400)).toMatchImageSnapshot()
+    expect(toImage(emSvg, 400)).toMatchImageSnapshot()
+    expect(toImage(remSvg, 400)).toMatchImageSnapshot()
   })
 })