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

Posted 2023-03-25

【中文标题】Fabric.js 一些自定义字体以非常小的尺寸和错误的字体呈现

【英文标题】：Fabric.js some custom fonts render in very small size and in wrong font

【发布时间】：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。

有什么想法吗？

【参考方案1】：

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

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

fontFamily = '"Disco Duck 3D"';

你应该没事的