css - How to prevent different browsers rendering fonts differently?

Question

I have an issue with trying to maintain a constant font style across all browsers. As seen below, safari's font rendering system makes the font weight smaller than the font weight of chrome's.

Safari:

Chrome:

I've tried using the solutions found on other questions though they have not solved this issue. How can I maintain a constant font style across all the major browsers? That is Chrome, Safari, Opera, Firefox and Internet Explorer.

Here is what I have tried.

1. -webkit-font-smoothing: antialiased;

2. font-weight: 800;

3. text-rendering: optimizeLegibility;

Answer 1

Browsers, by and large, have different font rendering engines/methods. For more details, I recommend reading this, this, and/or this.

Honestly, to the average user, the difference will not be all that noticeable and for the most part, pixel-perfect cross-browser display of anything has been long abandoned as a print-world aftereffect.

If, for some masochistic reason, pixel perfection is more important than sanity and maintainable code, you can try the old standy-bys (text-in-images, image/text replacment) or turning off subpixel rendering via CSS (although not all browser support it, and the text will be less readable).

Hope that helps.