PhantomJS不能呈现带有Web字体的屏幕截图？

Question

我一直在寻找解决方案，不知道如何让PhantomJS在截屏时显示web字体，有人能告诉我如何做吗？

- user328570

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

不要使用谷歌推荐的“failsafe”：

@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引擎中的某些误报有关。

- user328570

---

我也测试了一下，并验证它在2003服务器及以后的版本上也可以工作，但无法读取OTF格式，这是微软自己的格式... :P 此外，在服务器上可能会出现像素化的情况，因为ClearType被禁用了，只需启用ClearType并进行配置过程，就可以解决问题。 - user328570

我最终使用了一个脚本，作为代理访问谷歌的CSS文件，并使用正则表达式删除本地标签。 - Roel van Duijnhoven

在我的OSX上，phantomjs 1.9.7对我不起作用。但是，使用自定义的WOFF网页字体支持构建可以解决问题：http://arunoda.me/blog/phantomjs-webfonts-build.html - d4n3

是的，我们在使用Windows或Linux时也会得到略微不同的字体外观，有些字体在某些系统上根本无法使用。 :/ - user328570

到目前为止，我还没有什么好运气 :/ 这真的很令人沮丧。 - st.derrick

你按照描述的步骤在 Windows 机器上操作了吗？另外，你使用的是哪个版本？ - user328570