Question

我通过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;
}

我想知道是否有办法获得字体的网址，例如＆＃34; Lobster_1.3-webfont.ttf＆＃34;和＆＃34; Lobster_1.3-webfont.woff＆＃34;在css中定义。

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

你们有任何线索吗？

PS：我之所以需要字体的网址，是因为我使用fabric.js创建svg文件并通过节点端的phantom.js将其呈现为PDF，但看起来phantom.js没有使用@import url支持svg（＆＃39; xxx.css＆＃39;）。所以我必须使用@ font-face和src。

Answer 1

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

fabric.fontPaths = { };

如果你存储了网址信息：

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

如何通过webfont loader

2 个答案: