phantomjs + Web字体+字体加载器 [英] phantomjs + web fonts + font loader

问题描述

我正在node.js环境中运行 phantomjs ，目前一切顺利.目前，我只是使用本地字体，但想使用来使用 google网络字体.

I'm running phantomjs within a node.js environment, and it's going well. At the moment I'm just using local fonts, but want to get google web fonts working with phantomjs.

关于是否以及如何使Web字体可以与phantomjs一起使用的各种冲突和令人困惑的报告在那里.像此之类的文章包含带有无效链接的过时信息.诸如此之类的帖子表明 phantomjs 2.0 将或可以支持网络字体，其他人则表示不会，但 2.0.1 会.在此帖子中，建议使用Webfonts在 2.0 中起作用.

There are various conflicting and confusing reports out there about whether and how web fonts can be made to work with phantomjs. There are articles like this that contain outdated information with dead links. And posts like this that suggest that phantomjs 2.0 will or can support web fonts, others saying that it doesn't but 2.0.1 will. In this post there is a suggestion that webfonts do work in 2.0.

我尝试了很多选项，包括 phantomjs 2.0 和网络字体加载器在我的JS中加载网络字体，以下:

I've tried lots of options, including with phantomjs 2.0 and 2.0.1 binaries, but can't get it working. It may be that I'm loading the web fonts in my js using the web font loader using something along the following:

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

But I'm always reaching the inactive branch, so the font load is never successful... even though the same code works fine in a browser (reaching the active branch.

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

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

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

我怀疑Web字体加载程序确实在确定浏览器(phantomjs)不支持此功能，因此总是访问inactive.

My suspicion is that web font loader is indeed determining that the browser (phantomjs) does not support this, hence always reaching inactive.

有人让phantomjs + Web字体+ Web字体加载器工作了吗?

Anyone got phantomjs + web fonts + web font loader working?

推荐答案

您使用的UA是什么?我认为Web Font Loader使用UA来检测支持.尝试使用Chrome 46的UA，然后查看是否可以使用.

What is the UA you are using? I think Web Font Loader uses UA to detect the support. Try a UA of Chrome 46 and then see if it works.

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 + Web字体+字体加载器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！