PhantomJS没有使用webfonts渲染截图？

Question

所以我一直在环顾四周,似乎找不到如何让PhantomJS在屏幕截图上实际显示网页字体的解决方案,有人能告诉我是否有办法做到这一点？

Answer 1

我已经进行了大约一周的测试和测试,最后得出了答案,知道这也可能是我在Windows机器上运行PhantomJS的结果.我目前正在运行PhantomJS v1.9.7并找到了以下解决方案:

在我的CSS文件中使用它:

@font-face {
    font-family: 'Vampiro One';
    src: url(http://themes.googleusercontent.com/static/fonts/vampiroone/v3/Ho2Xld8UbQyBA8XLxF1_NYbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
.vamp {
    font-family: "Vampiro One";
    font-size: 1.5em;
}

而不是谷歌推荐的"故障保险":

@font-face {
  font-family: 'Vampiro One';
  font-style: normal;
  font-weight: 400;
  src: local('Vampiro One'), local('VampiroOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/vampiroone/v3/Ho2Xld8UbQyBA8XLxF1_NYbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
.vamp {
  font-family: 'Vampiro One', cursive;
  font-size: 1.5em;
}

似乎可以做到这一点.我希望这可以避免让某人像我一样沮丧.对于那些难以发现差异的人,我删除了"local()"字体,它只指向我真正想要的一种字体,以及删除后备字体,我认为这与一些误报有关在PhantomJS或WebKit引擎中.