Fonts looks different in Firefox and Chrome

问题:

I am using Google Web Font's PT-sans

font-family: 'PT Sans',Arial,serif;

but it looks different in Chrome and Firefox

Is there anything that I need to add so that it looks same in all browsers?

回答1:

css reset may fix the problem, I am not sure .

http://developer.yahoo.com/yui/reset/

回答2:

For the ChunkFive font from FontSquirrel, specifying "font-weight: normal;" stopped Firefox's rendering from looking like ass when used in a header. Looks like Firefox was trying to apply a fake bold to a font that only has one weight, while Chrome was not.

回答3:

For me, Chrome web fonts look crappy until I put the SVG font ahead of WOFF and TrueType. For example:

@font-face {
    font-family: 'source_sans_proregular';
    src: url('sourcesanspro-regular-webfont.eot');
    src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg'),
         url('sourcesanspro-regular-webfont.woff') format('woff'),
         url('sourcesanspro-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Even then, Chrome's fonts look thinner than in Firefox or IE. Chrome looks good at this point, but I usually want to set different fonts in IE and Firefox. I use a mixture of IE conditional comments and jQuery to set different fonts depending on the browser. For Firefox, I have the following function run when the page loads:

function setBrowserClasses() {
    if (true == $.browser.mozilla) {
        $('body').addClass('firefox');
    }
}

Then in my CSS, I can say

body { font-family: "source_sans_proregular", Helvetica, sans-serif; }
body.firefox { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }

Likewise, in an IE-only stylesheet included within IE conditional comments, I can say:

body { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }

回答4:

To avoid font discrepancies across browsers, avoid using css styles to alter the look of the font. Using the font-size property is usually safe, but you may want to avoid doing things like font-weight: bold; instead, you should download the bold version of the font and give it another font-family name.

回答5:

There are a few fixes. But usually it can be fixed with:

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

Sometimes it can be due to font-weight. If you are using a custom font with @font-face make sure your font-weight syntax is correct. In @font-face the idea of the font-weight/font-style properties are to keep your font-family name across different @font-face declarations while using different font-weight or font-style so those values work properly in CSS (and load your custom font -- not "fake bold").

I've seen -webkit-text-stroke: 0.2px; mentioned to thicken webkit fonts, but I think you probably won't need this if you use the first piece of code I gave.

回答6:

I've noticed that chrome tends to make fonts a bit more sharper and firefox a bit smoother. There is nothing you can do about it. good luck

回答7:

As of 2014, Chrome still has a known bug where if the webfont being used has a local copy installed, it choses to use the local version, hence, causing OP rendering issues.

To fix this, you can do the following:

First, target Chrome Browser or OSX (For me, the issue was with OSX Chrome only). I have used this simple JS to get quick Browser/OS's detection, you can chose to do this in any other way you're used to:

https://raw.github.com/rafaelp/css_browser_selector/master/css_browser_selector.js

Now that you can target a Browser/OS, create the following 'new' font:

@font-face {
    font-family: 'Custom PT Sans';    
    src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/jKK4-V0JufJQJHow6k6stALUuEpTyoUstqEm5AMlJo4.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

The font URL is the same your browser uses when embedding the google webfont. If you use any other font, just copy and change the URL accordingly.

Get the URL here http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,latin-ext

You may also rename your @font-face custom font-family alias.

Create a simple CSS rule to use that font targeting Browser/OS or both:

.mac .navigation a {    
    font-family: "Custom PT Sans", "PT Sans", sans-serif;
}

Or

.mac.webkit p {
    font-family: "Custom PT Sans", "PT Sans", sans-serif;
}

Done. Just apply the font-family rule wherever you need to.

回答8:

Different browsers (and FWIW, different OSes) use different font rendering engines, and their results are not meant to be identical. As already pointed out, you can't do anything about it (unless, obviously, you can replace text with images or flash or implement your own renderer using javascript+canvas - the latter being a bit overboard if you ask me).

回答9:

i found this to be working great :

-webkit-text-stroke: 0.7px;

or

-webkit-text-stroke: 1px rgba(0, 0, 0, 0.7);

experiment with the "0,7" value to adjust to your needs. The lines are added where you define the bodys font.

here is an example:

body {
    font-size: 100%;
    background-color: #FFF;
    font-family: 'Source Sans Pro', sans-serif;
    margin: 0;
    font-weight: lighter;
    -webkit-text-stroke: 0.7px;

回答10:

I had the same issue for a couple of months. Finally, it got worked by disabling below settings in Chrome browser's settings.

Set "Accelerated 2D Canvas" to "Disabled" (In the browser's address bar, go to chrome://flags#disable-accelerated-2d-canvas, change the setting, relaunch the browser.)

Since the fix for this issue has clearly changed, I would suggest in general turning off any hardware-accelerated text-rendering/2D-rendering features in the future if this fix stops working.

On Google Chrome 55, this issue appears to have cropped up again. As anticipated, the fix was disabling hardware acceleration, it just changed locations.

The new fix (for me) appears to be:

Settings -> Show advanced settings... -> System UNCHECK "Use hardware acceleration when available"

https://superuser.com/questions/821092/chromes-fonts-look-off