我正在使用PhantomJS版本1.9.7,据我所知它应该支持Web字体。我已经通过Google Web Fonts插入了字体,但是在自动截图时它只显示我的备用字体。这个Web字体在我的所有浏览器中都可以正常显示。有没有任何解决方法?
我正在使用PhantomJS版本1.9.7,据我所知它应该支持Web字体。我已经通过Google Web Fonts插入了字体,但是在自动截图时它只显示我的备用字体。这个Web字体在我的所有浏览器中都可以正常显示。有没有任何解决方法?
我为这个问题苦苦挣扎了几个小时。其实,这个争议的原因很简单:用户代理!
一些服务(如 Google Fonts)会根据用户代理返回不同的 CSS 内容。当您调用包含 Google Fonts 的网页时,如果使用默认的 PhantomJs 用户代理,Google 会返回 PhantomJs 支持的 TTF 版本。
然而,如果您设置了一个 自定义用户代理(如 Chrome、FF 等),Google Fonts 将返回 .woff2
版本。而 PhantomJs 2.x 不支持 .woff2
。显然,字体将无法加载。
因此,对于没有设置通用用户代理进行 PhantomJs 测试的用户,Google Fonts 是可以正常工作的。但如果他们设置了 Google Chrome 用户代理,它就不能正常工作。
所以,您有两个选择:
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我相信您的看法是错误的 :-) Phantom 1.9.x 系列仍然基于旧的 WebKit 代码,人们一直报告网页字体问题。
好消息是,Phantom 2.0 的技术预览似乎即将发布; https://github.com/ariya/phantomjs/wiki/PhantomJS-2 是跟进状态的最佳地点。而且,从记忆中,有人报告使用它可以成功使用 web 字体(但我可能记错了,因为在邮件列表存档中快速搜索并没有找到明确的信息说 web 字体可以使用...不过它们肯定 应该 可以)。
顺便说一下,SlimerJS 是一个几乎可以替代的工具,基于 Firefox 的 Gecko 引擎,并支持 web 字体(尽管在某些边角情况下存在问题,如果我没记错的话)。
我刚遇到了PhantomJS 2.1.1的同样问题。 我的情况是我在代理下工作,代理阻止PhantomJS从Google加载字体。连接到开放网络后,它正确地呈现了。
我尝试了这里列出的所有修复方法,但都没有成功,但是这里有一个解决方法。任何一种选项都可以解决我的问题。
第一种选项: 在运行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。