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;
}

而不是谷歌推荐的“failafe”：

@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引擎中。

PhantomJS没有使用webfonts渲染截图？

1 个答案: