javascript - 如何通过 webfont loader 获取字体 src 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 不支持带有 @ 的 svg导入 url('xxx.css')。所以我必须将 @font-face 与 src 一起使用。

Answer 1

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

fabric.fontPaths = { };

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

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

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