node.js - phantomjs + 网络字体 + 字体加载器

Question

我正在运行 phantomjs在 node.js 环境中，一切顺利。目前我只是使用本地字体，但想获得 google web fonts使用 phantomjs。

关于是否以及如何使网络字体与 phantomjs 一起使用，有各种相互矛盾和令人困惑的报告。有像this这样的文章包含带有死链接的过时信息。以及像 this 这样的帖子这表明 phantomjs 2.0 将或可以支持网络字体，其他人说它不支持，但 2.0.1 支持。在 this发布有建议说 webfonts 在 2.0 中可以工作。

我尝试了很多选项，包括 phantomjs 2.0 和 2.0.1二进制文件，但无法使其正常工作。可能是我正在使用 web font loader 在我的 js 中加载网络字体使用以下内容:

WebFont.load({
    google: {
        families: ['Droid Sans', 'Droid Serif']
    },
    loading: function() { console.log('loading'); },
    active: function() {
        console.log('active');
        // hooray!  can do stuff...
    },
    inactive: function() { console.log('inactive'); },
    fontloading: function(familyName, fvd) { console.log('fontloading', familyName, fvd); },
    fontactive: function(familyName, fvd) { console.log('fontactive', familyName, fvd); },
    fontinactive: function(familyName, fvd) { console.log('fontinactive', familyName, fvd); }
});

但我总是到达 inactive 分支，所以字体加载永远不会成功......即使相同的代码在浏览器中工作正常(到达 active 分支。

在 font loader docs ，它说:

If Web Font Loader determines that the current browser does not support @font-face, the inactive event will be triggered.

我怀疑网络字体加载器确实确定浏览器 (phantomjs) 不支持此功能，因此总是达到 inactive。

有人让 phantomjs + web fonts + web font loader 工作吗？

Answer 1

您使用的 UA 是什么？我认为 Web Font Loader 使用 UA 来检测支持。试试 Chrome 46 的 UA，然后看看它是否有效。

var webPage = require('webpage');
var page = webPage.create();
page.settings.userAgent = 'Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36';