Question

我正在研究延迟加载字体的解决方案，并在fabric.js画布上使用。我正在以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"';

你应该没事。

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

1 个答案: