在Capybara-Webkit中显示@font-face字体

Question

当我使用capybara-webkit测试我的网站并且截取屏幕时，CSS中的@font-face声明会被忽略。这尤其糟糕，因为我正在使用FontAwesome，所以页面在真正的浏览器中显示会有很大的差异。

如何重现：https://gist.github.com/anonymous/4948827 输出结果：http://i.imgur.com/5lsrleY.jpg 是否有任何方法可以解决这个问题？

- user1252065

---

有关该问题，取得了什么成功吗？ - luckyjazzbo

Answer 1

一些研究表明，在Capybara-Webkit中渲染自定义字体是完全可能的，与PhantomJS相同。这篇PhantomJS论坛帖子指出了问题所在。快速总结如下：

1. SVG字体效果最佳。
2. OTF字体往往无法工作。
3. 应该使用Qt5进行修复，因此请检查您构建的Qt版本。

- Parker Selbert

Answer 2

根据构建的qt版本，需要对非localhost网址白名单进行管理。这包括对外部资源（如字体）的元引用。

为了全局实现此功能，请在rspec配置块中的spec_helper.rb文件中添加以下内容：

config.before(:each) do
  page.driver.allow_url("the-domain-name.com")
end

如果你已经有了一个 before :each，只需将其放在那里即可。 allow_url 也接受字符串数组。

我已经在你的 gist 中放置了一条评论来说明这一点。

- IAmNaN

---

我认为这个白名单已经存在一段时间了，但是qt吃掉了警告。然而，qt5会显示它们，这就是我偶然发现这个解决方案的原因。 - IAmNaN