同一浏览器（Firefox），相同字体，不同计算机上的不同呈现

Question

I've got a problem. I am using titillium weblight font (with standard font-face appliance - including text-rendering: optimizeLegibility, font-weight, line-height etc.). The problem is that the font renders differently on Firefox (same version 31.0) on two different computers, with similar hardware, same resolution, same OS (Windows 7).

On the first computer it renders normally:

While on the second one it lacks antialiasing as far as I can tell:

Maybe the difference is not that big that anyone should concern, but it is important for me that every detail of this project will be just fine.

Anyone has any idea? Thanks in advance.

Answer 1

These three properties together have always worked for me across different browsers.

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

The issue is called "antialiasing" or "subpixel rendering" and it has to do with how the browser/computer treats the edges of your text. If you're curious you can read more about it here on Wikipedia .