爲什麼這兩種樣式如果具有相同的css屬性會呈現不同的效果？

您可以看到現場演示here。爲什麼這兩種樣式如果具有相同的css屬性會呈現不同的效果？

問題是下面，h3和title-azul mas-grande：

h3{ 
    color:#109de9; 
    font-size:28px; 
    margin-bottom:15px; 
    margin-top:15px; 
}

和

.title-azul{ 
    color:#109de9; 
    font-size:20px; 
    margin-bottom:6px; 
} 

.mas-grande{ 
    font-size:28px; 
    margin-bottom:15px; 
    margin-top:15px; 
}

據我所知應該呈現的相同，但title-azul mas-grande呈現較小：

enter image description here

當我檢查中鉻元素，計算出的風格也正是除了font-weight: normal;同樣沒有出現在類title-azul mas-grande：

-webkit-border-image: none; 
border-bottom-color: rgb(16, 157, 233); 
border-bottom-style: none; 
border-bottom-width: 0px; 
border-left-color: rgb(16, 157, 233); 
border-left-style: none; 
border-left-width: 0px; 
border-right-color: rgb(16, 157, 233); 
border-right-style: none; 
border-right-width: 0px; 
border-top-color: rgb(16, 157, 233); 
border-top-style: none; 
border-top-width: 0px; 
color: rgb(16, 157, 233); 
display: block; 
font-family: omnes; 
font-size: 28px; 
font-weight: normal; #This does not appear when I inspect the div with the class title-azul mas-grande 
height: 28px; 
line-height: 28px; 
margin-bottom: 15px; 
margin-left: 0px; 
margin-right: 0px; 
margin-top: 15px; 
padding-bottom: 0px; 
padding-left: 0px; 
padding-right: 0px; 
padding-top: 0px; 
vertical-align: baseline; 
width: 750px;

這是奇怪的，因爲所需的字體粗細實際上是normal，但是我能找到的唯一明顯的區別。

你能找出問題出在哪裏嗎？

來源

2013-02-26 Trufa

我認爲這只是一種光學效應。我改變了標題文字，並且它們呈現相同。（efectoóóptico;））

來源

2013-02-26 19:09:41 Amida

同樣在這裏，我改變了標題的一種方式，然後另一種，他們看起來大小和風格是相同的。我相信這只是一種幻覺。 – Smeegs 2013-02-26 19:10:26

如果您在PS中打開圖像並覆蓋文本，則「o」和「e」字符是相同的。 – cimmanon 2013-02-26 19:12:27

該死！我覺得自己像一個白癡謝謝！很快就會接受！ – Trufa 2013-02-26 19:14:19

爲什麼這兩種樣式如果具有相同的css屬性會呈現不同的效果？

回答

相關問題