canvas引入外部字体无效解决方法

Posted 2020-11-25 wpp281154

1.css文件中引入外部字体

@font-face {
    font-family: ‘hwhp‘;
    src: url(‘../font/hwhp.ttf‘) format(‘truetype‘),
        url(‘../font/hwhp.eot‘),
        url(‘../font/hwhp.woff‘) format(‘woff‘),
        url(‘../font/hwhp.svg‘) format(‘svg‘);
}

canvas设置字体样式

var wm = document.createElement(‘canvas‘);
        wm.setAttribute(‘width‘, 600);
        wm.setAttribute(‘height‘, 500);
        var ctx = _wm.getContext(‘2d‘);
        ctx.font = "130px ‘hwhp‘";
        ctx.translate(50, 380);
        ctx.rotate(-0.5);
        ctx.fillStyle="#F8F8FF";
        ctx.fillText(text, 0, 0);

最重要的一步，html文件中需要预先使用字体样式，尽量放在body下面第一个元素，元素必须可见。

<div style="font-family: hwhp;">.</div>