phantomjs + 网络字体 + 字体加载器答案

【问题标题】：phantomjs + web fonts + font loaderphantomjs + 网络字体 + 字体加载器
【发布时间】：2016-03-13 19:30:37
【问题描述】：

我在node.js 环境中运行phantomjs，并且进展顺利。目前我只是使用本地字体，但想让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 中，它说：

如果Web Font Loader判断当前浏览器不支持@font-face，则会触发inactive事件。

我的怀疑是网络字体加载器确实确定浏览器（phantomjs）不支持这个，因此总是到达inactive。

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

【问题讨论】：

标签： node.js phantomjs webfonts google-webfonts webfont-loader

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

【讨论】：

遗憾的是，没有区别 :-( 使用 phantomjs 1.9.8、2.0.0 和 2.0.1 进行了尝试...每次只到达 inactive 分支
我只是尝试使用 phantomjs@1.9.19，更改了 userAgent。日志：loading、active..
你有sn-ps代码分享@cviejo吗？我仍然无法将其发送到active 分支...
哎呀，对不起，忘了！将在今天发布

【解决方案2】：

不被标记为正确，只是扩展上述答案。由于所有 phantomjs 包装器（如 phridge 和 phantomjs-node）基本上都会产生一个新的 phantomjs 进程，因此从 nodejs 上下文运行时结果应该是相同的。

phatomjs-webfonts.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PhantomJS WebFontsTest</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
<script>
    WebFont.load({
        google: {
            families: ['Droid Sans', 'Droid Serif']
        },
        loading:  function(){ console.log('WebFonts loading'); },
        active:   function(){ console.log('WebFonts active'); },
        inactive: function(){ console.log('WebFonts inactive'); }
    });
</script>   
</body>
</html>

phantomjs-webfonts.js：

var page = require('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';

page.onConsoleMessage = function(msg, lineNum, sourceId) {
  console.log('Console: ' + msg);
};

page.open('http://<server-address>/phantomjs-webfonts.html', function(status) {
  console.log("Loading status: " + status);
});

命令：

phantomjs phantomjs-webfonts.js

输出：

Console: WebFonts loading
Console: WebFonts active
Loading status: success

【讨论】：

什么版本的phantomjs？ $ phantomjs -v
我不知道还有 1.9.19？见phantomjs.org/release-1.9.html 或者你指的是phantomjs npm 包npmjs.com/package/phantomjs 目前版本为1.9.19？
看起来确实如此。我在家用机器上进行了测试，今晚将发布正确的版本信息。