采集站点的font图标作为图片png下载到本地 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>需要使用本地font在canvas上画图操作</title>
	<style>
		@font-face{font-family:'porto-icons';
		src:url('porto-icons.woff2') format('woff2'),
		url('porto-icons.woff') format('woff');
		font-weight:400;font-style:normal;font-display:block}
		.info::after{
			content:'\e81b';
			font-family:'porto-icons';
			color:red;
		}
	</style>
</head>
<body>
	<p class="info">

	</p>
	
	<canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;">
		您的浏览器不支持 HTML5 canvas 标签。
	</canvas>
	<button onclick="draw()">imooc教程</button>
	<script>
		function draw(){
			var c=document.getElementById("imooc");
			var ctx=c.getContext("2d");
			//设置了字体大小，和字体样式
			ctx.font="30px porto-icons";
			ctx.fillText("\ue81b",10,50);
		}
	</script>
</body>
</html>

　　

posted @ 2024-03-12 01:19  ziyoujike  阅读(10)  评论(0)    收藏  举报
节
春