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

Posted 2023-02-19

【中文标题】在 Capybara-Webkit 中显示 @font-face 字体

【英文标题】：Display @font-face Fonts in Capybara-Webkit

【发布时间】：2013-01-29 15:02:31

【问题描述】：

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

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

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

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

有没有办法解决这个问题？

【问题讨论】：

这个问题成功了吗？

【参考方案1】：

根据构建capybara-webkit 所针对的qt 版本，webkit 需要将非本地 localhost 的 URL 列入白名单。这包括对外部资产（如字体）的元引用。

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

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

如果你已经有一个 before :each ，就把它扔进去。 allow_url 也接受字符串数组。

我已经在您的要点中对此发表了评论。

【讨论】：

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

【参考方案2】：

一些研究表明，完全可以在 Capybara-Webkit 中呈现自定义字体，与使用 PhantomJS 相同。此PhantomJS Forum Post 标识故障问题。快速总结：

SVG 字体效果最好。 OTF 字体往往不起作用。 应该使用 Qt5 修复它，因此请检查您构建的 Qt 版本。