在HTML5的Canvas中用fillText来写入文本，使用自定义字体怎么无效？

金斗网络-网站技术2 2015-12-11 03:32:49

在HTML5的Canvas中用fillText来写入文本，使用自定义字体怎么无效？
更邪门的是火狐有效，Webkit内核的浏览器和IE都不行。

我用百度FEX的Fontmin工具生成了用于网页的精简字体集（ttf、woff、eot、svg），然后把字体定义到了CSS里

@font-face {

	font-family: "AHeitiStdR";

	src: url("/file/font/AHeitiStdR.eot"); /* IE9 */

	src: url("/file/font/AHeitiStdR.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */

	

	url("/file/font/AHeitiStdR.woff") format("woff"), /* chrome、firefox */

	url("/file/font/AHeitiStdR.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */

	

	url("/file/font/AHeitiStdR.svg#AHeitiStdR") format("svg"); /* iOS 4.1- */

	font-style: normal;

	font-weight: normal;

}



@font-face {

	font-family: "msyhbd";

	src: url("/file/font/msyhbd.eot"); /* IE9 */

	src: url("/file/font/msyhbd.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */

	

	url("/file/font/msyhbd.woff") format("woff"), /* chrome、firefox */

	url("/file/font/msyhbd.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */

	

	url("/file/font/msyhbd.svg#msyhbd") format("svg"); /* iOS 4.1- */

	font-style: normal;

	font-weight: normal;

}

然后使用js来绘制文本

	ctx.font = 'normal normal 700 28px AHeitiStdR';

	ctx.fillStyle = '#C00';

	ctx.fillText('(山东起重机网升级版)', 175, 105);

结果自定义字体并没有生效。

说代码有错吧，火狐却生效了

我究竟哪里出错了？求给我解答一下

PS：css的字体直接定义给html元素里的文字是有效的

...全文

3333 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

HQChart 2019-07-24

打赏
举报

先加载字体，然后再画，不然第1次是画不出来的。
用 webfont 先load下字体

烂泥也能扶上墙 2019-07-24

打赏
举报

在html中引入自定义字体,页面没效果,报错说“次文件是二进制文件或使用了不支持的文本编码，无法在编辑器中显示“这是为什么？

sinat_30196869 2017-01-06

打赏
举报

原来我只知道谷歌的不行，也没试过火狐，发现了火狐是可以的，我就觉得应该是浏览器加载速度差的问题。后来在setTimeout方法内进行画布的描绘谷歌的字体就能出来了，所以应该是自定义的字体还没加载完谷歌浏览器就开始画布的写入了，所以才会获取不到自定义的字体。

Ginger_Z 2016-11-04

打赏
举报

楼主，这个问题解决了吗？我也遇到了同样的问题。

duetop 2016-01-25

打赏
举报

同问同问，很恼火啊，绘图想使用一点炫酷的字体都不行

业余草 2016-01-25

打赏
举报

http://www.jb51.net/w3school/html5/canvas_font.htm

业余草 2016-01-25

打赏
举报

Canvas中用fillText来写入文本是Canvas不生效，还是自定义字体？你先不用Canvas看字体是否能用给你个demo http://www.108js.com/article/article3/30271.html?id=1144

金斗网络-网站技术2 2015-12-11

打赏
举报

我又单独摘出来放到一个文件里测了一下，还是不行，，，，，，，，，，到底是怎么回事

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		@font-face {
			font-family: "AHeitiStdR";
			src: url("/file/font/AHeitiStdR.eot"); /* IE9 */
			src: url("/file/font/AHeitiStdR.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
			
			url("/file/font/AHeitiStdR.woff") format("woff"), /* chrome、firefox */
			url("/file/font/AHeitiStdR.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
			
			url("/file/font/AHeitiStdR.svg#AHeitiStdR") format("svg"); /* iOS 4.1- */
			font-style: normal;
			font-weight: normal;
		}

	</style>
</head>
<body>
	<canvas id="testc" width="1160px" height="125px"></canvas>
</body>
</html>
<script>
	var ctx = document.getElementById('testc').getContext("2d");
	ctx.font = 'bold 28px AHeitiStdR';
	ctx.fillStyle = '#C00';
	ctx.fillText('(山东起重机网升级版)', 165, 110);
</script>