PhantomJS呈现页面字体

Question

我正在使用PhantomJS进行网页截图。

我看到过其他关于@font-face问题的帖子，但我页面上的字体呈现正确。我唯一的问题是，每次截图时，字体显示与前一个截图略有不同。所以尽管他们的渲染是正确的，但他们在截图上的外观是不一致的。

我已经尝试了许多修复，大多数都是基于这样的假设，即这与页面准备好之前拍摄的截图有关，但这似乎不是问题所在。例如，我已经延迟了截图，以便字体有时间加载和呈现，但这并不能解决问题。

我已经附上截图来显示区别。问题是，我需要呈现的屏幕截图是准确的上下文，我正在使用它。

注意，我也尝试过CasperJS（知道它是基于PhantomJS的，所以不希望它有任何不同）。

Answer 1

您是否厌倦了在DOM上观看与字体相关的事件？您也可以尝试每X秒拍摄一次截图，生成一个时刻-时刻的概述（注意，这将产生大量空的和重复的图像。如果这是一个问题，尝试简单地设置一个最小文件大小或检查两个文件是否有相同的大小）。

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

page.open("http://www.slashdot.org", function (status) {
    phantom.exit();
}); 

var i = 0;
setInterval(function() {

    i += 1;
    page.render("/tmp/screenshots/screenshot-" + i + ".png");

}, 50);