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继承属性，因此也不是问题。谢谢。 --Ashley

Answer 1

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

Mysteriously Bold字体CSS3

1 个答案: