Question

编辑：此处示例： [已删除实例 - 问题已解答]

我试图以相同的方式显示此标题字体，并且它在操作系统之间显示不同。所有OSX和Ubuntu浏览器都显示相同，但是当我在Windows机器上测试时，它的显示方式不同。它在OSX上的显示方式是我希望它显示的方式（底部的一小部分隐藏在下部元素后面）。

如果我更改CSS（添加填充或行高），它会为Windows修复它，但会为OSX搞砸。

是否有一种解决办法，不需要通过javascript或其他东西将操作系统和浏览器特定的选择器放在页面中？我试图让代码保持尽可能纯净（即可能最少的hacky修复）。

Header和H1的CSS：

#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：

<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>

OSX上的Chrome显示

enter image description here

Win 7上的Chrome显示

enter image description here

编辑：此处示例： [已删除实例 - 问题已解答]

Answer 1

罪魁祸首是Google Web Font API。我手动下载了字体并在我自己的域上托管了字体，问题现在已经消失。

因此，Google Web Font API存在一些问题，导致操作系统之间出现渲染差异。

这是我发现的，这促使我可能是问题所在：http://webdesignandsuch.com/fix-fonts-that-dont-work-with-google-font-api-in-internet-explorer-or-chrome-with-font-face/

简而言之，托管你自己的字体，一切都很好（在OSX，Win XP，Win 7和Ubuntu上的所有常见浏览器上都经过测试）。

Answer 2

我建议在css中使用line-height并重置边距＆amp;填充只是为了确保......

#header h1 {
   font-size: 100px;
   line-height: 100px;  /* adjust as necessary */
   padding: 0;
   margin: 0;
   font-family:'Josefin Sans';
   text-align: left;
   color:#ffffff;
}

CSS文本在OSX / Windows之间显示不同

2 个答案: