fonts are displaying different in chrome / firefox

问题

Every One.

I am getting issues in displaying my page in different browsers. Here i am using "Myrid Set Pro" font.

I am getting correctly in chrome. but not in firefox. I am attaching those files.

Here first one is preview in Chrome. And second one is Preview in Firefox.

I tried text-rendering also. But no Use

text-rendering: optimizelegibility;

回答1:

Currently, there is no consensus on this topic. Shamefully, there are lots of tricks but no specific solutions for this issue.

The problem is, every browser and operative system handles font rendering differently. That is why is so difficult to get the same results across web browsers and systems.

This same question has been asked a couple of times here on SO:

1.- How do I get font to display properly in all browsers?

2.- Same font yet its weight seems different on different browsers

Below, I will list some of the proposed solutions; however it is possible they won't work:

// @Mohamed Anis Dahmani
html, html a {
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

// @oneiota
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;

And there is also another one using translate3d: webfont-rendering-fix.css

body {
  -webkit-transform: translate3d(0px, 0px, 0px);  /* Force hardware acceleration to fix safari opacity bugg*/ 
}

My suggestion, look for web safe fonts http://cssfontstack.com/ which would minimize the impact of font rendering across web browsers and operative systems.

回答2:

I've had the same issue in the past. Check out this article on font faces across browsers - hopefully this can help resolve your issue.

http://alistapart.com/article/say-no-to-faux-bold

---

Update with new information:

I found a much simpler method to resolve this (as for me, it turned out that this was only occurring on Firefox for OSX) - add the following to your base typography css file:

-moz-osx-font-smoothing: grayscale;

There is more information in this CSS-Tricks.com forum discussion: https://css-tricks.com/forums/topic/typekit-fonts-much-bolder-in-firefox/page/3/

While the forum discussion title specifically mentions Typekit fonts, the solution applied beautifully to google fonts.

来源：https://stackoverflow.com/questions/26352852/fonts-are-displaying-different-in-chrome-firefox