在Firefox中控制可预测的字体渲染

Question

我在Docker和CentOS 7.5上使用Firefox，在使用CentOS 7.5但没有Docker的机器上使用Firefox，并且我比较了使用着名的Roboto Web字体的页面的屏幕截图。

这两种环境都具有相同的Firefox版本，并且理论上相同版本的CentOS，但任何yum update都可能破坏东西。

它们不是逐像素相同的。我认为字体是相同的，似乎抗锯齿和/或提示有点不同。

我需要进行控制，以实现自动化测试，并避免再次拍摄屏幕截图。

关于如何控制这个的任何线索？

上图是Docker里面的CentOS，下图是CentOS独立：

使用CSS：

**更新**

在与font-kerning，text-rendering和font-smoothing玩一点后，文本具有相同的间距但是大小略有不同，并且一些像素也有一点变化：

[！[上部有Docker，下部没有Docker] [3]] [3]

Answer 1

没有一致的解决方案（如here所述），因为每个浏览器/操作系统都有自己的字体渲染引擎。

但是，您可以尝试使用这些CSS属性中的任何一个来查看它们是否可以帮助您解决问题（它永远不会是100％但是手动摆弄这些可能会让您足够接近：

.item {
  font-kerning: none/auto/normal/...;
  text-rendering: optimizeLegibility/...;
  font-smoothing: auto/normal/... 
}

或试试像letter-spacing这样的东西

如果没有这些工作，你总是可以尝试文本阴影黑客（即使它很老）提到here