javascript - Fabric.js 一些自定义字体以非常小的尺寸和错误的字体呈现

Question

我正在研究用于延迟加载字体并在 fabric.js Canvas 上使用的解决方案。我以 woff 格式托管自定义字体，并使用 WebFont 加载程序在选择框的更改事件中加载它们，如下所示:

$fontSelect.change(function() {
            const [font] = $(this).select2('data');
            if (font) {
                FontLoader.load(font.url, font.text)
                    .then(() => {
                        editorObject.setFontFamily(font.text);
                    }, () => {
                        console.log('error while loading font');
                    });
            }
        });

FontLoader.load 方法如下所示:

private static loadCustomFont(name: string, url: string, callback: Function, errorCallback: Function): void {

        if (this.loadedFonts.indexOf(name) !== -1) {
            callback();
            return;
        }
        const markup = `
            @font-face {
                font-family: '${name}';
                font-style: normal;
                font-weight: normal;
                src: local('${name}'), url('${url}') format('woff');
            }
        `;
        let style =  document.createElement('style');
        style.setAttribute('type', 'text/css');
        style.innerHTML = markup;
        document.head.appendChild(style);

        WebFont.load({
            custom: {
                families: [
                    name
                ]
            },
            active: () => {
                callback();
            },
            inactive: () => {
                errorCallback();
            }
        });
    }

大多数字体都可以正常工作，但其中一些字体以下列方式呈现:

有问题的字体是 Dumbledore 3。它可以在 dafont.com 上免费获得。

奇怪的是，当我转到开发工具并在 css 中的某些元素上指定 font-family 时，字体显示正确。

其他有问题的字体之一也是 Disco Duck 3D。

有什么想法吗？

Answer 1

问题出在字体名称上。字体名称被传递给 ctx.font api，字体名称中的数字被误认为是字体大小

尝试像这样将字体传递给 fabric.js

fontFamily = '"Disco Duck 3D"';

你应该没事