如何使用带有phantomjs的Google网络字体

Question

我使用的是phantomjs版本1.9.7，我相信它应该支持网络字体。我已经使用谷歌网络字体插入了字体，但是当我自动化屏幕抓取时，它只是显示我的后备字体。 webfont在我的所有浏览器中都能正常显示。有没有解决方法呢？

Answer 1

我已经在这个问题上挣扎了几个小时。嗯，这个争议有一个简单的原因：用户代理！

某些服务（如Google字体）会根据用户代理返回不同的CSS内容。当您拨打包含Google字体 默认PhantomJs用户代理的网页时，Google会返回PhantomJs支持的TTF版本。

但是，如果您设置自定义用户代理（Chrome，FF等），Google字体将返回.woff2版本。 PhantomJs 2.x不支持.woff2。显然，不会加载字体。

因此，对于在未设置通用用户代理的情况下测试PhantomJ的用户，Google Fonts正在运行。如果他们设置了Google Chrome用户代理，则无法使用。

所以，你有两个选择：

1. 如果可能，请避免设置自定义用户代理。
2. 避免使用谷歌字体之类的哑智能字体提供商，它不会在CSS中输出所有字体版本，让浏览器决定它需要什么。

Answer 2

我相信你的信念是错误的:-) 1.9.x系列的Phantom仍然基于旧的WebKit代码，人们一直在报告Web字体问题。

好消息是Phantom 2.0的技术预览显然即将发布; https://github.com/ariya/phantomjs/wiki/PhantomJS-2旨在成为关注状态的最佳位置。并且，从记忆中，有人报告使用它的网络字体成功（但我可能是错的，因为快速搜索邮件列表档案没有发出一个明确的消息说网络字体工作...但他们肯定应）。

BTW，基于Firefox的Gecko引擎，SlimerJS几乎是替代品，并支持网络字体（虽然在角落案件中存在一些问题，IIRC）。

Answer 3

我与PhantomJS 2.1.1有同样的问题。 在我的情况下，我在一个阻止PhantomJS从Google加载字体的代理下工作。连接到开放网络后，它会正确呈现。