javascript - 我需要使用从 Fabric JS 的特定文件夹中获取的字体

Question

我使用 Fabric JS 构建了一个简单的图像编辑器。该编辑器不在线，但在未安装 Web 服务器的本地计算机上运行，​​因此要运行它，我只需双击一个 html 文件，它就会在浏览器中打开 file://。协议(protocol)。文件夹内 assets/fonts我已经放置了我想使用的字体文件 (.ttf)。

其中一些字体没有安装在机器上，所以我想告诉 Fabric JS 从项目中包含的文件夹中获取字体。

我已经尝试使用 path IText 的属性并尝试设置 useNative无论是真还是假，但都没有成功。

在没有安装网络服务器的本地计算机上，我尝试设置文件夹的相对路径，如 assets/fonts或 assets/fonts/和其他类似的。

我读过关于 path 的文章:“使用 Cufon 时字体文件的 URL”，阅读有关 Cufon它似乎已被弃用，可能这就是为什么我不能使用我文件夹中的字体的原因。

您知道是否可以使用从 Fabric JS 的特定文件夹中获取的字体吗？

更新:

我已经尝试使用一个简单的 Web 服务器“miniweb”，现在应用程序可以使用 http://协议(protocol)，无论如何，甚至试图以多种方式将字体文件的路径传递给 path参数，FabricJS 一直忽略它。我再次尝试使用 useNative IText 传递的参数 false对它来说，运气不好。

更新 2:

这是我创建要添加到 Canvas 的文本对象的代码

var txt = (new fabric.IText(nome, {
    fontFamily: 'A_Inc_Corsivo',
    path: 'Corsivo_Incimar.ttf',
    // useNative: false,
    fontSize: s,
    fill: c,
    hasBorders: true,
    hasControls: true,
    lockScalingY: true,
    left: 0,
    top: 0
}));

canvas.add(txt);

文本被添加到 Canvas 中，但使用的是 Times New Roman 或类似的东西。只是为了尝试，我现在将 .ttf 文件放在 js 脚本和 html 页面所在的同一文件夹中，这样就不可能使用错误的路径。

如果我使用 @font-face进入CSS，然后进入我放入的页面的html代码 <span style="font-family:'A_Inc_Corsivo'">Some text</span>文本以正确的字体显示。

这是 @font-face用于css文件

@font-face {
    font-family: 'A_Inc_Corsivo';
    src: url('Corsivo_Incimar.ttf');
}

Answer 1

以与不包含 fabric 的方式相同的方式包含字体，fabric 实际上在这里完全不相关。

@font-face {
  font-family: "Font Name";
  src: url("/path/to/file.ttf");
}

这是我用来将约 300 种字体直接注入(inject)浏览器的解决方案(文件仅在需要时加载):

var fonts = (function () {

    return {
        stylesheet: null,

        injectAll: function (fonts) {
            if (this.stylesheet === null) {
                this.stylesheet = this.generateStyleSheet();
            }

            fonts.forEach(this.insertFont.bind(this));
        },

        insertFont: function (font) {
            var rule = this.getFontRule(font);
            this.stylesheet.insertRule(rule, 0);
        },

        getFontRule: function (font) {
            var fontFaceStr = '@font-face { font-family: "' + font.familyName + '"; src: url(/path/to/font/' + font.fileName + '); }';

            return fontFaceStr;
        },

        generateStyleSheet: function () {
            var style = document.createElement('style');

            style.appendChild(document.createTextNode('')); // webkit hack
            document.head.appendChild(style);

            return style.sheet;
        }
    };
})();

用法:

var fontlist = [{ fileName: 'CustomFont.tff', familyName: 'Custom Font SC' }, { fileName: 'CustomFont-Two.tff', familyName: 'Custom Font Two SC' }];

font.injectAll(fontlist);