在Capybara Webkit中显示@font face字体

Question

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

这尤其糟糕，因为我使用的是FontAwesome，所以在实际浏览器中显示页面的方式会有很大的不同。

如何复制：https://gist.github.com/anonymous/4948827

输出：https://i.stack.imgur.com/lBbFn.jpg

有什么办法解决这个问题吗？

Answer 1

一些研究表明，在Capybara Webkit中呈现自定义字体是完全可能的，与PhantomJS相同。这篇PhantomJS论坛文章指出了问题所在。快速总结：

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

Answer 2

根据capybara-webkit所针对的qt版本，webkit需要非本地主机URL列入白名单。这包括对字体等外部资产的元引用。

要在全局范围内实现这一点，请将其添加到rspec配置块中的spec_helper.rb中：

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

如果你之前有一个：每个都已经有了，就把它扔进去吧。CCD_ 3也接受一个字符串数组。

我在你的要点中对此作了评论。