Mysteriously粗體字體CSS3

我在我的頁面上使用了幾個按鈕上的webfont（poly）。在firefox中，所有內容都顯示正確，但在Chrome中，儘管使用了相同的CSS3代碼，但第一個按鈕的字體比其他字體更粗大（除非我錯過了拼寫錯誤）。Mysteriously粗體字體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

來源

2012-08-12 user1118684

它們看起來和我很相似：http://i.imgur.com/S39rQ.png – Blender 2012-08-12 17:55:58

這兩個按鈕上的字體對我來說看起來都一樣。屏幕截圖：http://imgur.com/VoZI1 – 2012-08-12 17:56:40

同樣在這裏。他們在Firefox和Chrome瀏覽器中看起來都一樣。也許第二個按鈕由於與背景顏色的對比而顯得更大膽一些？ – 2012-08-12 17:58:31

它可能與您的特定瀏覽器。無論如何，做一件非常好的事情（現在幾乎需要）是在你自己的CSS定義之前添加一個CSS Reset。只是谷歌「CSS重置」。你會看到很多結果。基本上，它會刪除瀏覽器特定的格式，以便您的CSS是頁面上唯一有效的格式。瀏覽器沒有意外的更改或添加。通常這樣做會解決你描述的各種問題。您可能想要研究瀏覽器的特性，但爲了節省時間，請先嚐試重置。

來源

2012-08-12 18:11:47 BillR

試了一下不同的方式，似乎並沒有工作，但一個很好的提示！ – user1118684 2012-08-12 23:36:44

Mysteriously粗體字體CSS3

回答

相關問題