如何在phantomjs中使用谷歌网络字体

Question

我正在使用PhantomJS版本1.9.7，据我所知它应该支持Web字体。我已经通过Google Web Fonts插入了字体，但是在自动截图时它只显示我的备用字体。这个Web字体在我的所有浏览器中都可以正常显示。有没有任何解决方法？

- alexrogers

---

我正在将以下内容添加到我的CSS文件中：@import url(http://fonts.googleapis.com/css?family=Open+Sans); - alexrogers

我刚刚在Windows上使用phantomjs版本1.9.7尝试了Bootstrap Fonts，截图成功了。也许你可以尝试以相同的方式包含它，因为有多个备选项。 - Artjom B.

Answer 1

我为这个问题苦苦挣扎了几个小时。其实，这个争议的原因很简单：用户代理！

一些服务（如 Google Fonts）会根据用户代理返回不同的 CSS 内容。当您调用包含 Google Fonts 的网页时，如果使用默认的 PhantomJs 用户代理，Google 会返回 PhantomJs 支持的 TTF 版本。

然而，如果您设置了一个 自定义用户代理（如 Chrome、FF 等），Google Fonts 将返回 .woff2 版本。而 PhantomJs 2.x 不支持 .woff2。显然，字体将无法加载。

因此，对于没有设置通用用户代理进行 PhantomJs 测试的用户，Google Fonts 是可以正常工作的。但如果他们设置了 Google Chrome 用户代理，它就不能正常工作。

所以，您有两个选择：

1. 如果可能的话，避免设置自定义用户代理。
2. 避免使用像 Google Fonts 这样的愚蠢智能字体提供商，他们不会在 CSS 中输出所有字体版本，而是让浏览器决定需要哪些字体。

- user172163

---

即使在PhantomJS 2.1.1中，我也能够验证这一点。 Mozilla/5.0（Macintosh; Intel Mac OS X）AppleWebKit/534.34（KHTML，like Gecko）PhantomJS/2.1.1（development）Safari/534.34的默认UA（没有'Chrome'）似乎按照您上面描述的方式工作。很好的发现。 - Drakes

截至目前（2017年），情况已经相反：Google字体返回默认UA“User-Agent：Mozilla/5.0（Windows NT 6.2; WOW64）AppleWebKit/538.1（KHTML，like Gecko）PhantomJS/2.1.1 Safari/538.1”的“.woff2”字体。因此，为了解决问题，应该设置非标准的User-Agent，例如只是“PhantomJS/2.1.1”。 - shytikov

@shytikov 这正是答案中提到的内容，所以没有任何改变。 - user172163

Answer 2

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

好消息是，Phantom 2.0 的技术预览似乎即将发布; https://github.com/ariya/phantomjs/wiki/PhantomJS-2 是跟进状态的最佳地点。而且，从记忆中，有人报告使用它可以成功使用 web 字体（但我可能记错了，因为在邮件列表存档中快速搜索并没有找到明确的信息说 web 字体可以使用...不过它们肯定 应该 可以）。

顺便说一下，SlimerJS 是一个几乎可以替代的工具，基于 Firefox 的 Gecko 引擎，并支持 web 字体（尽管在某些边角情况下存在问题，如果我没记错的话）。

- Darren Cook

---

我相信... 一个示例或者指向让你相信这点的链接会很有帮助。 这里有一个已关闭的问题：https://github.com/ariya/phantomjs/issues/10592，然而它仍然是个棘手的问题。最有帮助的是一个工作的示例。 - st.derrick

@st.derrick 在 Phantom 1.x 系列中不支持 Web 字体是我在 Phantom 邮件列表中看到的内容。 （SlimerJS 中与 Web 字体相关的边缘情况问题在 Slimer 邮件列表中提到过。） - Darren Cook

@st.derrick 刚刚阅读了那个错误问题。听起来就像我记得的一样 - 一团糟！一些人仍然说即使使用PhantomJS 2.0，它也不能可靠地工作 - 这似乎可能与Ubuntu软件包存在一些复杂的依赖关系有关？ - Darren Cook

Answer 3

我刚遇到了PhantomJS 2.1.1的同样问题。 我的情况是我在代理下工作，代理阻止PhantomJS从Google加载字体。连接到开放网络后，它正确地呈现了。

- marcelogil

Answer 4

我尝试了这里列出的所有修复方法，但都没有成功，但是这里有一个解决方法。任何一种选项都可以解决我的问题。

第一种选项： 在运行PhantomJS的本地计算机上安装缺失的Web字体。大多数Web字体提供商（包括Google）都允许您轻松下载字体进行本地安装。目标URL不需要更改。

第二种选项： 对于我有控制权的站点，我能够通过拆分链接标记来解决问题。

将此更改为：

<link href='//fonts.googleapis.com/css?family=Roboto:400,500,700|Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>

收件人：

<link href='//fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>

我知道这不是一个理想的解决方案，但其中任何一个都可以使用，这取决于您是否可以修改目标URL。

- factorypolaris