3

i use webfont-loader dynamic load fonts via css files,code like this

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

and in the css file,it like this

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

i wonder as if there is a way to get the font face url,like "Lobster_1.3-webfont.ttf" and "Lobster_1.3-webfont.woff" which defined in css.

in webfont-loader,there is no such api,if there is no directly way,i have to load the css as text file first,but i relly don't want do such things

do you guys have any clue?

PS:the reason why i need the font's url,is because i use fabric.js to create svg file and render it to PDF by phantom.js in node side,but looks that phantom.js did not support svg with @import url('xxx.css'). so i have to use @font-face with src.

4

2 回答 2

0

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

fabric.fontPaths = { };

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

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

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

于 2016-08-22T05:22:55.347 回答
0

首先获取带有 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;
      }
})
于 2020-02-18T20:19:25.743 回答