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

Question

当我使用capybara-webkit测试我的网站并截取屏幕截图时，CSS中的@ font-face声明将被忽略。

这特别糟糕，因为我使用的是FontAwesome，因此在真实浏览器中页面的显示方式会有很大差异。

如何重现：https://gist.github.com/anonymous/4948827

输出：http://i.imgur.com/5lsrleY.jpg

有什么方法可以解决这个问题吗？

Answer 1

一些研究表明，完全有可能在Capybara-Webkit中渲染自定义字体，与PhantomJS相同。这个PhantomJS Forum Post确定了问题。快速摘要：

1. SVG字体效果最佳。
2. OTF字体往往不起作用。
3. 应该用Qt5修复，所以请检查你构建的Qt的版本。

Answer 2

根据qt构建capybara-webkit的版本，webkit需要将非本地主机网址列入白名单。这包括对外部资产（如fonts）的元引用。

要使其全局发生，请将其添加到rspec配置块中的spec_helper.rb：

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

如果你有一个之前：每个已经，只需将它扔在那里。 allow_url也接受一个字符串数组。

我已经在你的要点上发表了评论。