font weights differing in webkit and firefox

问题

Im finalizing a design for which ive been working soley in firefox up to this point, just taking it across to webkit the first time ive notice is my headings differ quite allot, they are in Helvetica Neue UltraLight 50px, so in css :

font-family: "helvetica neue"; font-weight:100; font-size:50px;

when viewed in firefox it looks like the version on the left

viewed in webkit (safari, chrome, ios safari) it looks like the version on the right

any idea how i can bring these two further closer together ?

ive also made a small jsfiddle if any one wants to play around with the css,

回答1:

I've had luck with this in the past for pesky webkit fonts displaying bolder than intended:

-webkit-font-smoothing: antialiased;

I would also recommend using a CSS @font-face to display Helvetica Neue fonts. Helvetica Neue is not on all computers and operating systems by default. Hope this helps! :)

回答2:

try: -webkit-text-stroke: 0.35px

read more here: http://css-tricks.com/beefing-up-dull-text-in-webkit/

回答3:

From the images, it looks obvious that Firefox is using a thicker typeface of the family. I can’t guess why, and I cannot test on my computer – like most computers on the globe, it has no Helvetica Neue font.

And font availability is probably the most important issue here. What your font-family list causes on (almost all) Windows computers is that Arial will be used. And this means that the normal-weight (regular) typeface is used, since Arial has no thinner typeface.

So the best approach is probably to look for a free downloadable font and use it via @font-face. However, most of such fonts come with just two weights, or maybe even one, so you would need to focus on the relatively few fonts with, say, at least 6 typefaces, if you want something that exists both as 300 and as 100 weight. Perhaps Source Sans Pro could be of sufficiently similar design – or at least acceptable design.

回答4:

Add This Near the Top of Your Stylesheet

/**
 * Fix fonts that render as bold in Firefox
 *
 * Put this near the top of your style.css
 * Before any overriding styles
 */

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-weight: 400;
}

/**
 * Firefox specific rule
 */

@-moz-document url-prefix() {
  body {
    font-weight: lighter !important;
  }
}

The -moz prefixed rules target only Firefox. The -webkit prefixed rules target Chrome and Safari, which use the Webkit rendering engine for their browser.

Note: If you also use text-rendering: optimizeLegibility in your stylesheet, that can cause Internet Explorer to render some thicker fonts as bold when they should render as normal weight.

Reference from website.

来源：https://stackoverflow.com/questions/13144061/font-weights-differing-in-webkit-and-firefox

标签

css

fonts

cross-browser

typography