Google 字体未在 PhantomJS 中呈现

Question

我正在使用 PhantomJS 来捕获网页。该页面具有来自 google fonts API 的字体。当我渲染页面时，字体不会被渲染并返回默认值。

PhantomJS 版本：2.0
平台：Windows

我添加了我使用的代码：

var page = require('webpage').create();
var args = require('system').args;

var isLoad = false;

page.settings.userAgent = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36';

page.viewportSize = { width: 1400, height: 569.1588 };

page.open('http://www.facegift.co.il/canvas/print.aspx?userItemId=27477&Sc=974088&pagenum=3&width=1500&print=2', function (status) {
setTimeout(function () {
    var ue = page.evaluate(function () {
        return window.navigator.appVersion;
    });
    console.log("status: " + status);
    console.log("ue: " + ue);

    if (status === "success") {

        var timer = setInterval(function () {
            var ps = page.evaluate(function () {
                document.body.bgColor = 'white';
                return document.getElementById("pageStatus").innerHTML;
            });


            if (!isLoad) {
                console.log("wait...");
                if (ps == "loaded") {
                    clearInterval(timer);
                    console.log("proccessing...");
                    console.log("loaded");
                    isLoad = true;
                    page.render('new/exam1.png');
                    phantom.exit();
                }
            }
        }, 10);
    } else {
        console.log('Unable to load the address!');
        phantom.exit(1);
    }
}, 1500);
});

Answer 1

我无法重现您的问题。字体通常是在页面加载完成后加载的，所以需要等到字体加载完毕，页面重新渲染后，才能截图。我不知道加载和应用字体时可能触发的事件，但我在您的页面上的测试表明，等待 1.5 秒对于 PhantomJS 2.0.0 就足够了：

var page = require('webpage').create();

page.viewportSize = { width: 600, height: 600 };

page.open('http://www.facegift.co.il/canvas/print.aspx?userItemId=27477&Sc=974088&pagenum=3&width=1500&print=2', function(){
    setTimeout(function(){
        page.render("test40.png");
        phantom.exit();
    }, 1500);
});