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

【问题标题】：Fabric.js some custom fonts render in very small size and in wrong fontFabric.js 一些自定义字体以非常小的尺寸和错误的字体呈现
【发布时间】：2018-07-29 01:15:02
【问题描述】：

我正在研究延迟加载字体并在 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。

有什么想法吗？

【问题讨论】：

标签： javascript css fonts fabricjs

【解决方案1】：

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

尝试将字体传递给 fabric.js 之类的

fontFamily = '"Disco Duck 3D"';

你应该没事的

【讨论】：