12

我在一个环境中运行phantomjsnode.js，并且进展顺利。目前我只是使用本地字体，但想让谷歌网络字体与 phantomjs 一起使用。

关于是否以及如何使用phantomjs. 有这样的文章包含带有死链接的过时信息。像这样的帖子表明phantomjs 2.0将或可以支持网络字体，其他人说它不支持，但2.0.1会。在这篇文章中，建议 webfonts 在2.0中工作。

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

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分支。

在字体加载器文档中，它说：

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

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

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

4

2 回答 2

4

你用的是什么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';
于 2015-12-08T19:52:13.853 回答
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
于 2016-01-10T10:53:01.207 回答