如何通过webfont loader获取字体资源url

Question

我使用webfont-loader通过css文件动态加载字体，代码如下

WebFont.load({
    custom: {
        families: 'Lobster',
        urls:'mydomain.com/lobster.css'
    }
}

在css文件中，它是这样的

@font-face {
    font-family: 'Lobster';
    src: url('Lobster_1.3-webfont.woff') format('woff'),
         url('Lobster_1.3-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

我想知道是否有一种方法可以获得字体的url，就像css中定义的"Lobster_1.3-webfont.ttf“和"Lobster_1.3-webfont.woff”一样。

在webfont-loader中没有这样的api，如果没有直接的方法，我必须先把css作为文本文件加载，但我真的不想做这样的事情

你们有什么线索吗？

PS:我之所以需要字体的url，是因为我在节点端使用fabric.js来创建svg文件，并通过phantom.js将其渲染成PDF，但看起来phantom.js不支持带有@import url('xxx.css')的svg。所以我必须在src中使用@font-face。

Answer 1

好吧，假设您使用的是您选择的字体子集，但用户没有更新，因此您知道当前使用的字体的路径。Fabricjs有一个可以填充的内部对象，名为：

fabric.fontPaths = { };

如果您将url信息存储在其中：

fabric.fontPaths = {Lobster: 'Lobster_1.3-webfont.woff'};

您将在导出时将字体嵌入到svg中。这应该允许您在phantomjs中正确加载svg。

Answer 2

首先获取带有URL的字体名称。

var fontArray = [];
$.get("https://www.googleapis.com/webfonts/v1/webfonts?key={your key}&sort=popularity", {}, function (data) {
    var count = 0;
    $.each(data.items, function (index, value) {
        count++
        fontArray.push(value);
    });
});

然后添加到fabric.fontPaths。

    $.each(fontArray, function (i, item) {
     if (fontName == item.family) {
     var ttfFile  = item.files.regular;
     var dataFile = [];
    fabric.fontPaths[fontName] = "data:font/opentype;charset=utf-8;base64," + ttfFile;
      }
})