canvas引入外部字體無效解決方法

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>