Raleway 字体仅在 Windows 上向文本顶部添加额外的填充答案

【问题标题】：Raleway font adding additional padding to the top of text on Windows onlyRaleway 字体仅在 Windows 上向文本顶部添加额外的填充
【发布时间】：2011-06-30 23:03:17
【问题描述】：

我正在使用由 Google 的 Web Fonts 提供的 Raleway 字体，并且我发现在我的 Windows 7 机器上（使用 IE9、Firefox、Chrome、Safari 进行了测试），似乎在文本顶部添加了额外的填充。当我在我的 Mac 上查看它时（使用 Firefox、Chrome、Safari 测试），一切正常。如果我从 Google 的 Web Fonts 中选择不同的字体，那很好（至少对于我检查过的字体）。有没有其他人遇到过这个并知道我可以解决它的方法？

HTML

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />

        <title><?php bloginfo('name'); ?> - <?php bloginfo('description'); ?></title>

        <link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
        <link href="http://fonts.googleapis.com/css?family=Raleway:100&v1" rel="stylesheet" type="text/css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <p class="test">
            Hello World
        </p>
    </body>
</html>

CSS

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}

body {
    font-size: 62.5%;
}

.test {
    font-family: 'Raleway', sans-serif;
    font-size: 4em;
    text-transform: lowercase;
    font-weight: normal;
    font-style: normal;
    background: rgb(0,0,0);
    background: rgba(0,0,0,0.5);
      color: #fff;
}

【问题讨论】：

你能提供一些代码 (jsfiddle.net) 和截图吗？
代码，NP。今晚我回家后可以做的截图。
在 WIN XP 上的 IE8 和 FF 3.6 中检查 - 我看到顶部和底部的填充量相同。我没有在 IE 中看到字体，但没有在 css 中为测试类指定颜色 - 仅供参考。
@cvandal - 你能在一个操作系统和另一个操作系统中显示它吗？
@Jared，添加 30 像素的行高，然后添加 8 像素的填充底部似乎正是我所追求的！今晚我会确认这一点，当我可以跳上我的 Mac 看看它是如何显示时。

标签： html css font-face

【解决方案1】：

不同的浏览器会有不同的默认设置，比如内边距、边距和行高。请确保您已在它们之间平等地重置默认样式。

【讨论】：

我认为这可能应该是问题下的评论。 :)

【解决方案2】：

添加 0.8 行高和 8px 底部填充的 Jarads 解决方案解决了 IE9 中的问题，但没有解决所有其他浏览器中的问题。因此，我使用 Jarads 解决方案创建了一个仅限 IE 的 CSS，现在一切正常。

【讨论】：