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

Question

我使用 Fabric JS 构建了一个简单的图像编辑器。编辑器不在线，但是运行s 在没有安装网络服务器的本地机器上，所以要运行我只需双击一个 html 文件，它就会在浏览器中打开使用 file:// 协议。在文件夹 assets/fonts 中，我放置了我要使用的字体文件 (.ttf)。

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

我已经尝试使用 IText 的 path 属性并尝试将 useNative 设置为 true 和 false，但没有成功。

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

我读过关于 path 的这篇文章："URL of a font file, when using Cufon"，读到关于 Cufon 的文章，它似乎已被弃用，可能这就是为什么我不能使用我的文件夹中的字体的原因.

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

更新：

我尝试使用一个简单的网络服务器 "miniweb"，现在应用程序使用 http:// 协议工作，无论如何，甚至尝试以多种方式将字体文件的路径传递给path 参数，FabricJS 一直忽略它。我再次尝试使用 IText 的 useNative 参数将 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 页面所在的同一文件夹中，这样就不可能使用错误的路径。

如果我在 CSS 中使用 @font-face 然后在我放入的页面的 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

解决方案：无论如何都使用网络服务器。

我不是说 "install a massive server package like Apache, IIS, Tomcat, whatever"，而是 "just fire up a tiny http server that does exactly the same thing that you already expect now, except as proper http:// site instead of file:///"。

例如，如果您安装了 python，它可以通过命令行一行完成此操作：运行 python -m SimpleHTTPServer 在您的 index.html 目录中进去，然后打开 http://localhost:8000 - 完成。

或者，如果您是节点用户，请使用 npm install -g live-server 安装 live-server，然后在 index.html 文件所在的目录中安装运行 live-server . 这甚至会在您的浏览器中为您打开网站。再次，完成。

只需使用网络服务器，以便浏览器将您的html作为网页执行，而不是作为潜在的危险来源的安全漏洞，因为它只是硬盘上的一个随机文件，可能具有对文件系统的完全访问权限（因为浏览器可能有错误，如果其中一个与相对 link 解析相关，file:/// 资源如果浏览器允许对 file:/// 资源的权限与对 http:// 资源的权限相同，则可用于窃取磁盘上的 任何文件。

基本规则是：如果您编写任何要使用浏览器的内容，请通过适当的 http:// 渠道使用它。永远不要依赖 file:///.

Answer 2

像没有 fabric 的情况下一样包含字体，fabric 实际上在这里完全不相关。

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

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

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);

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

I need to use a font taken from a specific folder with Fabric JS

javascript

fonts

fabricjs