diff --git a/src/render/canvas/canvas-renderer.ts b/src/render/canvas/canvas-renderer.ts
index 48e7315..077ddd0 100644
--- a/src/render/canvas/canvas-renderer.ts
+++ b/src/render/canvas/canvas-renderer.ts
@@ -162,7 +162,7 @@ export class CanvasRenderer extends Renderer {
const fontVariant = styles.fontVariant
.filter((variant) => variant === 'normal' || variant === 'small-caps')
.join('');
- const fontFamily = styles.fontFamily.join(', ');
+ const fontFamily = fixIOSSystemFonts(styles.fontFamily).join(', ');
const fontSize = isDimensionToken(styles.fontSize)
? `${styles.fontSize.number}${styles.fontSize.unit}`
: `${styles.fontSize.number}px`;
@@ -947,3 +947,12 @@ const canvasTextAlign = (textAlign: TEXT_ALIGN): CanvasTextAlign => {
return 'left';
}
};
+
+// see https://github.com/niklasvh/html2canvas/pull/2645
+const iOSBrokenFonts = ['-apple-system', 'system-ui'];
+
+const fixIOSSystemFonts = (fontFamilies: string[]): string[] => {
+ return /iPhone OS 15_(0|1)/.test(window.navigator.userAgent)
+ ? fontFamilies.filter((fontFamily) => iOSBrokenFonts.indexOf(fontFamily) === -1)
+ : fontFamilies;
+};
diff --git a/tests/reftests/text/lang/chinese.html b/tests/reftests/text/lang/chinese.html
index da5c696..9aed4d2 100644
--- a/tests/reftests/text/lang/chinese.html
+++ b/tests/reftests/text/lang/chinese.html
@@ -11,6 +11,13 @@
float: left;
}
+ .apple-system {
+ font-family: -apple-system, Arial;
+ }
+
+ .system-ui {
+ font-family: system-ui, Arial;
+ }
@@ -32,5 +39,7 @@
〔13〕 法捷耶夫（一九○一——一九五六），苏联名作家。他所作的小说《毁灭》于一九二七年出版，内容是描写苏联国内战争时期由苏联远东滨海边区工人、农民和革命知识分子所组成的一支游击队同国内反革命白卫军以及日本武装干涉军进行斗争的故事。这部小说曾由鲁迅译为汉文。
〔14〕 见鲁迅《集外集·自嘲》（《鲁迅全集》第7卷，人民文学出版社1981年版，第147页）。
+ 中文
+ 中文