0

I have Firefox on Docker and CentOS 7.5, and on a machine with CentOS 7.5 but no Docker, and I compare a screenshot of a page that uses the well-known Roboto web font.

Both environments have the same exact version of Firefox, and theorically the same version of CentOS, but any yum update could spoil things.

They aren't pixel by pixel identical. I think the font is the same, It seems antialiasing and/or hinting is a little different.

I need to be controlled, for automated testing purposes, and avoiding to take again screenshots.

Any clue on how to control this?

Upper image is CentOS inside Docker, lower image is CentOS standalone:

Docker vs no Docker

Used CSS:

Used CSS

** UPDATE **

After playing a little with the font-kerning, text-rendering, and font-smoothing, the text has the same spacing but slighly different size, and also some pixels change a little:

[![Upper with Docker, lower without Docker][3]][3]

david.perez
  • 6,090
  • 4
  • 34
  • 57

1 Answers1

1

There is no consistent solution (as mentioned here) because each browser / OS has their own font rendering engine.

However you could try any of these CSS properties to see if they can help you with your issue (it will never be 100% but manually fiddling with these might get you close enough:

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

or try things like letter-spacing

Should none of those work you could always try the text-shadow hack (even though it's quite old) mentioned here

Billie Bobbel
  • 304
  • 1
  • 8
  • I'm using in the 2 environments the same version of CentOS (it depends also the moment of doing `yum update`) and the same version of Firefox. – david.perez Mar 26 '19 at 08:44