Question

我在node.js环境中运行phantomjs，并且进展顺利。目前我只使用本地字体，但想让google web fonts使用phantomjs。

有各种相互矛盾且令人困惑的报告，说明是否以及如何使用phantomjs来处理网络字体。像this这样的文章包含带有死链接的过时信息。像this这样的帖子暗示 phantomjs 2.0 会支持网络字体，有些人会说它不会支持 2.0.1 。在this帖子中，有人建议网页字体可以在 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分支。< / p>

在font loader docs中，它说：

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

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

任何人都有phantomjs +网络字体+网页字体加载器工作吗？

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';

Answer 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 +网络字体+字体加载器

2 个答案: