如何在 HTML 画布上渲染图标字体，尤其是 Material Design 图标字体？

Question

This wonderful answer 详细介绍了如何在 HTML 画布中包含来自 FontAwesome 的图标。但是，从 Material Design 调整图标字体的代码是行不通的。除了将 FontAwesome 值替换为 Material Design 值之外，所有代码都是相同的。

代码如下。

Codepen：https://codepen.io/Crashalot/pen/dyyEPWV

1) 如何将 Material Design 中的图标合并到 HTML 画布中？

2) 如何合并来自任何图标字体（例如，https://github.com/framework7io/framework7-icons）的图标？

var FontAwesome = function () {
    return new Promise(function (done, failed) {
        var me = {},
            FACache = {};

        function find (name) {
            var elm = document.createElement('i');
            elm.className = 'fa fa-' + name;
            elm.style.display = 'none';
            document.body.appendChild(elm);
            var content = window.getComputedStyle(
                elm, ':before'
            ).getPropertyValue('content')
            document.body.removeChild(elm);
            return content;
        };

        me.get = function (name) {
            if (!!FACache[name]) return FACache[name];
            var c = find(name)[1];
            FACache[name] = c;
            return c;
        };

        (function() {
            var l = document.createElement('link'); l.rel = 'stylesheet';
            l.onload = function () {
                document.fonts.load('10px Material Icons')
                    .then(function (e) { done(me); })
                    .catch(failed);
            }
            l.href = '//fonts.googleapis.com/icon?family=Material+Icons';
            var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
        }());
    });
};

FontAwesome()
.then(function (fa) {

    var canvas = document.getElementById('mycanvas');
    const x = canvas.width / 2;
    const y = canvas.height / 2;

    // All set, and ready to render!
    var ctx = canvas.getContext('2d');
        ctx.textAlign = "center";
            ctx.textBaseline = "middle";
        ctx.font = '400px Material Icons';
        ctx.fillText(fa.get("airplanemode_active"), x, y);
});

Answer 1

使用FontFace 接口。

它只需要你的字体文件的 url。当字体可以使用时，它的load() 方法将返回一个 Promise 解析。

const ctx = canvas.getContext('2d');

const material_font = new FontFace( 'material-icons',
  // pass the url to the file in CSS url() notation
  'url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2)' );
document.fonts.add( material_font ); // add it to the document's FontFaceSet

const framework7_font = new FontFace( 'framework7-icons',
  'url(https://cdn.jsdelivr.net/gh/framework7io/framework7-icons@master/fonts/Framework7Icons-Regular.woff2)' );
document.fonts.add( framework7_font );

// wait the font loads
material_font.load().then( () => {
  // we're good to use it
  ctx.fillStyle = 'green';
  ctx.font = '20px material-icons';
  ctx.fillText('airplanemode_active', 20, 40);
}).catch( console.error );

framework7_font.load().then( () => {
  ctx.fillStyle = 'blue';
  ctx.font = '20px framework7-icons';
  ctx.fillText('airplane', 20, 80);
}).catch( console.error );

<canvas id="canvas"></canvas>