xxx

package.json

 {
 	"name": "html-shot",
-	"version": "1.0.27",
+	"version": "1.0.28",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"license": "MIT",

readme.md

@@ -28,7 +28,8 @@ window['html-shot/debug-mode'] = true
 ## 注意点
 * 仅支持的元素有：`img`、`text`、`canvas(svga/spine/lottie)`
 * 不支持`transform`变换
-* 文本仅只是`Arial`字体，建议给元素设置为`Arial`字体
+* ~~文本仅只是`Arial`字体，建议给元素设置为`Arial`字体~~
+* 1.0.28开始支持自定义字体，前提是确保设备上有字体或者引入了字体
 * 不支持`z-index`样式
 * 不支持下划线样式
 * 不支持所有滤镜

src/dom-parser.ts

@@ -12,6 +12,7 @@ const commonStyleKeys = [
 ]
 
 const styleKeys = [
+	'fontFamily',
 	'fontSize',
 	'fontWeight',
 	'textAlign',

src/toCanvas.ts

@@ -34,6 +34,7 @@ interface INodeData {
 	//文本需要
 	text?: string
 	color?: string,
+	fontFamily?: string,
 	fontSize?: string,//文本字号
 	fontWeight?: string,//文本粗细
 	wordWrap?: "break-word" | null
@@ -201,6 +202,7 @@ function drawText(data: INodeData, ctx: CanvasRenderingContext2D, scale: number)
 		x, y, width, height,
 		text,
 		color,
+		fontFamily,
 		fontSize: fontSizeTxt,
 		fontWeight,
 		fontStyle,
@@ -215,7 +217,7 @@ function drawText(data: INodeData, ctx: CanvasRenderingContext2D, scale: number)
 	let fontSize = parseFloat(fontSizeTxt) * scale
 
 	let font = fontSize + 'px'
-	font += " Arial";//字体没有
+	font += ' ' + (fontFamily || "Arial")
 	//font-weight:bold;font-style:italic
 	if (fontWeight) font = fontWeight + " " + font
 	if (fontStyle) font = fontStyle + " " + font

test.html

@@ -12,11 +12,16 @@
 	<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
 
 	<style>
-		*{
+		* {
 			padding: 0;
 			margin: 0;
 		}
 
+		@font-face {
+			font-family: "hanti";
+			src: url("https://yun.duiba.com.cn/aurora/assets/d79652b6f29ae0cba894f28ad757d78cef8304d5.TTF");
+		}
+
 		.poster {
 			position: relative;
 			border-radius: 1.00rem;
@@ -27,6 +32,11 @@
 			font-size: 0;
 		}
 
+		.p {
+			font-size: 1rem;
+			font-family: hanti;
+		}
+
 		.inner-mask {
 			position: absolute;
 			border-radius: 1.00rem;
@@ -92,10 +102,7 @@
 <script type="text/babel">
 	ReactDOM.render(
 		<div id="poster" className="poster">
-			<img src="https://yun.duiba.com.cn/aurora/assets/2e4adf3d8646ffbd027038cb2c6627a6bca44e44.jpg"/>
-			<div className="inner-mask">
-				<img src="https://yun.duiba.com.cn/aurora/assets/69acd42c0ce3ef567bbdf49c09d9f7cb86581d5a.png"/>
-			</div>{/**/}
+			<p className="p">我也!</p>
 		</div>,
 		document.getElementById('app')
 	);