如何通过 webfont loader 获取字体 src url答案

【问题标题】：how to get the font src url via webfont loader如何通过 webfont loader 获取字体 src url
【发布时间】：2016-12-28 12:21:51
【问题描述】：

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

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不支持带有@的svg导入网址（'xxx.css'）。所以我必须在 src 中使用@font-face。

【问题讨论】：

标签： javascript phantomjs fabricjs webfonts webfont-loader

【解决方案1】：

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

fabric.fontPaths = { };

如果你在那里存储 url 信息：

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

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

【讨论】：

是的，我知道使用 fontPaths。但在我的情况下，这是一个动态加载，而且我有很多字体，一个不明智的决定是将字体文件 url 添加到 fontlist.json（现在只是记录css文件url)
说说fabric fontPaths，看来他们没有考虑样式，相同的字体家族但不同的样式，需要不同的字体文件，对吧？
取决于字体文件。如果您在同一文件中有粗斜体和粗体+斜体，则此方法有效。否则你必须定义不同的家族 Lobster_bold、Lobster_italic 等等。

【解决方案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;
      }
})

【讨论】：