PhantomJS 不使用 webfonts 渲染屏幕截图？答案

【问题标题】：PhantomJS not rendering screenshots with webfonts?PhantomJS 不使用 webfonts 渲染屏幕截图？
【发布时间】：2014-04-09 09:13:32
【问题描述】：

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

【问题讨论】：

标签： phantomjs webfonts google-webfonts

【解决方案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 引擎中。

【讨论】：

我也对此进行了测试并验证了它也适用于 2003 Server 及更高版本，但它无法读取 OTF 格式，这是 Microsoft 自己的格式...... :P 另外，它可能在服务器上看起来像素化，因为 cleartype 已禁用，只需启用 cleartype 并完成配置过程，您就可以了。
我最终使用了一个脚本，它充当 Google 的 CSS 文件的代理，它使用正则表达式删除本地标签。
不适用于 OSX 上的 phantomjs 1.9.7。它确实适用于自定义 WOFF 网络字体支持构建：arunoda.me/blog/phantomjs-webfonts-build.html
是的，根据我们使用的是 windows 还是 linux，我们的字体外观也会略有不同，而且某些字体显然不适用于某些系统。 ://
到目前为止我还没有运气：/这很令人沮丧