Question

我使用Fabric JS构建了一个简单的图像编辑器。编辑器不在线，但是在没有安装Web服务器的本地计算机上运行，因此要运行它，我只需双击一个html文件，然后使用file://协议打开浏览器。在文件夹assets/fonts内，我放了我想要使用的字体文件（.ttf）。

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

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

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

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

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

更新：

我尝试使用简单的Web服务器“miniweb”，现在应用程序使用http://协议工作，无论如何，甚至尝试以几种方式将路径传递给字体文件{{1参数，FabricJS一直忽略它。我再次尝试使用path参数将IText传递给useNative，但没有运气。

更新2：

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

false

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

如果我在CSS中使用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);，然后在我放置的页面的html代码中 @font-face文本显示正确的字体。

这是用于css文件的<span style="font-family:'A_Inc_Corsivo'">Some text</span>

@font-face

Answer 1

包括字体的方式与没有布料的方式相同，布料实际上与此完全无关。

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

Answer 2

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

我并不是说“安装一个像Apache，IIS，Tomcat这样的大型服务器软件包”，但是“只需启动一个微小的http服务器，这个服务器与你现在所期望的完全相同，除非是正确的http ：// site而不是file：///“。

例如，如果您安装了python，它可以使用命令行one-liner：在您的index.html所在的目录中运行python -m SimpleHTTPServer，并打开http://localhost:8000 - 完成。

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

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

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

我需要使用Fabric JS

2 个答案: