font-face - PhantomJS 渲染页面字体

Question

我正在使用 PhantomJS 截取网页截图。

我看过其他关于@font-face 问题的帖子，但我页面上的字体呈现正确。我遇到的唯一问题是，每次我截取屏幕截图时，字体显示的内容都与之前的屏幕截图略有不同。因此，尽管它们渲染正确，但它们在屏幕截图上的外观却不一致。

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

我曾尝试绑定(bind)到各种页面事件，但同样没有运气。

我附上了屏幕截图以显示差异。问题是，我需要渲染的屏幕截图在我使用它的上下文中是准确的。




作为说明，我也尝试过 CasperJS(知道它基于 PhantomJS，所以不希望它有任何不同)。

Answer 1

看腻了DOM for font related事件？您也可以尝试每隔 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);