PhantomJS + Web字体 + 字体加载器

Question

PhantomJS + Web字体 + 字体加载器

node.jsphantomjswebfontsgoogle-webfontswebfont-loader

12

我正在node.js环境中运行phantomjs，目前一切顺利。目前我只使用本地字体，但想让Google Web Fonts与phantomjs配合使用。

关于如何在phantomjs中使用Web字体，存在各种冲突和混乱的报道。有一些文章，比如this，包含过时的信息和失效的链接。还有一些帖子，比如this，它们表明phantomjs 2.0将或可以支持Web字体，而其他人则表示不支持，但2.0.1会支持。在this中的帖子中，有一个建议是Web字体可以在2.0中使用。

我尝试了很多选项，包括使用phantomjs 2.0和2.0.1二进制文件，但无法使其正常工作。可能是因为我在JS中使用web font loader加载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”事件。

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

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

- drmrbrewer

2个回答

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);
});

Command:

phantomjs phantomjs-webfonts.js

Output:

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

- cviejo

PhantomJS 的版本是多少？ $ phantomjs -v - drmrbrewer

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - drmrbrewer

看起来是这样的。我在家里的机器上进行了测试，今晚会发布正确的版本信息。 - cviejo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Neo · Accepted Answer

您正在使用哪个UA？我认为Web字体加载器使用UA来检测支持情况。请尝试将UA设置为Chrome 46，然后查看是否有效。

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