CSS text displaying differently between OSX / Windows_问答_开发者

CSS text displaying differently between OSX / Windows

开发者 https://www.devze.com 2023-03-31 01:21 出处：网络

EDIT: Example here: [Live example removed - question answered] I\'m trying to display this header font the same way and it\'s appearing differently between Operating Systems. All OSX and Ubuntu brows

相关专题：css

EDIT: Example here: [Live example removed - question answered]

I'm trying to display this header font the same way and it's appearing differently between Operating Systems. All OSX and Ubuntu browsers display it the same, but when I test it on a Windows machine, it displays differently. The way it's displaying on OSX is how I want it to display (with a tiny part of the bottom hidden behind the lower element).

If I change the CSS (add padding or line-height) it fixes it for Windows but screws it up for OSX.

Is there a work-around that doesn't involve having to put OS and Browser开发者_如何学Python specific selectors in the page via javascript or something? I'm trying to keep the code as pure as possible (ie the least hacky fixes possible).

CSS for Header and H1:

#header {
    height:70px;
    overflow:hidden;
    background-image: url('header-canvas2-bg.png');
    background-repeat: repeat-x;
    background-attachment: fixed;
}

#header h1 {
    font-size: 100px;
    font-family:'Josefin Sans';
    text-align: left;
    color:#ffffff;
}

HTML for header:

<head>
    <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:700' rel='stylesheet' type='text/css'>
    <!--SNIP-->
</head>
<body>
<div id="header">
  <h1><a href="#">testing font</a></h1>
</div>
<!--SNIP-->
</body>

Chrome on OSX displays

CSS text displaying differently between OSX / Windows

Chrome on Win 7 displays

CSS text displaying differently between OSX / Windows

EDIT: Example here: [Live example removed - question answered]

The culprit was the Google Web Font API. I downloaded the font manually and hosted the font face on my own domain, and the issue is now gone.

So there is some issue with the Google Web Font API that causes rendering differences between operating systems.

This was what I found that prompted me that it could be the issue: http://webdesignandsuch.com/fix-fonts-that-dont-work-with-google-font-api-in-internet-explorer-or-chrome-with-font-face/

So in short, host your own font faces and all appears fine (tested on all common browsers on OSX, Win XP, Win 7 and Ubuntu).