html - 神秘粗体字体 CSS3

Question

我在页面上的几个按钮上使用了 webfont (poly)。在 Firefox 中，一切正常，但在 Chrome 中，第一个按钮的字体似乎比其他按钮更粗，尽管使用相同的 CSS3 代码(除非我遗漏了拼写错误)。

http://ashgavs.cloudant.com/site/_design/AshGavsCouch/betcha/index.html

这就是页面，查看登录与使用 Facebook 登录或注册。影响字体粗细的不是文本的长度，已经测试过了。

这是第一个和第二个按钮的 CSS:

     #login{
        position: absolute;
        top: 137px;
        left: 19px;
        padding-top: 10px;
        padding-bottom: 10px;
        border-top: 1px solid #aff797;
        background: #369942;
        background: -webkit-gradient(linear, left top, left bottom, from(#27ca3d), to(#369942));
        background: -webkit-linear-gradient(top, #27ca3d, #369942);
        background: -moz-linear-gradient(top, #27ca3d, #369942);
        background: -ms-linear-gradient(top, #27ca3d, #369942);
        background: -o-linear-gradient(top, #27ca3d, #369942);
        -webkit-border-radius: 11px;
        -moz-border-radius: 11px;
        border-radius: 5px;
        -webkit-box-shadow: rgba(0,0,0,.7) 0 1px 0;
        -moz-box-shadow: rgba(0,0,0,.7) 0 1px 0;
        box-shadow: rgba(0,0,0,.7) 0 1px 0;
        text-shadow: 0 1px 0 #91d99a;
        color: #0e5817;
        font-size: 24px;
        font-family: 'Poly', serif;
        text-decoration: none;
        vertical-align: center;
        width: 229px;
    }

    #loginFB{
        position: absolute;
        top: 196px;
        left: 19px;
        padding-top: 10px;
        padding-bottom: 10px;
        border-top: 1px solid #65a9d7;
        background: #3e779d;
        background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
        background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
        background: -moz-linear-gradient(top, #65a9d7, #3e779d);
        background: -ms-linear-gradient(top, #65a9d7, #3e779d);
        background: -o-linear-gradient(top, #65a9d7, #3e779d);
        -webkit-border-radius: 11px;
        -moz-border-radius: 11px;
        border-radius: 5px;
        -webkit-box-shadow: rgba(0,0,0,.7) 0 1px 0;
        -moz-box-shadow: rgba(0,0,0,.7) 0 1px 0;
        box-shadow: rgba(0,0,0,.7) 0 1px 0;
        text-shadow: 0 1px 0 #7ca9c7;
        color: #0e3458;
        font-size: 24px;
        font-family: 'Poly', serif;
        text-decoration: none;
        vertical-align: center;
        width: 229px;
      }

两个按钮都继承了相同 div 的属性，所以这也不是问题。谢谢。--阿什利

Answer 1

它可能与您的特定浏览器有关。无论如何，一件非常好的事情(现在几乎是一个要求)是在您自己的 CSS 定义之前添加一个 CSS Reset。只需谷歌“CSS 重置”。你会看到很多结果。基本上它会删除浏览器特定的格式，以便您的 CSS 是页面上唯一有效的格式。浏览器没有意外的更改或添加。通常这样做会解决您描述的各种问题。您可能想研究浏览器的特性，但为了节省时间，请先尝试重置。