From ba2b1cd8e9a9d7932675d7abffce1526a609e769 Mon Sep 17 00:00:00 2001 From: Niklas von Hertzen Date: Wed, 29 Dec 2021 22:09:32 +0800 Subject: [PATCH] fix: ios 15 font rendering crash (#2645) --- src/render/canvas/canvas-renderer.ts | 11 ++++++++++- tests/reftests/text/lang/chinese.html | 9 +++++++++ tests/reftests/text/text.html | 2 +- 3 files changed, 20 insertions(+), 2 deletions(-) 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页）。

+
中文
+
中文
diff --git a/tests/reftests/text/text.html b/tests/reftests/text/text.html index ae1f46f..66e4021 100644 --- a/tests/reftests/text/text.html +++ b/tests/reftests/text/text.html @@ -149,6 +149,6 @@ [AB / CD]
Emojis 🤷🏾‍♂️👨‍👩‍👧‍👦 :)
-
Emojis with letter-spacing 🤷🏾‍♂️👨‍👩‍👧‍👦 :)
+
Emojis with letter-spacing 🤷🏾‍♂️👨‍👩‍👧‍👦 :) ❤️❤️❤️👨‍❤️‍💋‍👨👨‍❤️‍👨