为什么这两种样式如果具有相同的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属性会呈现不同的效果？

回答

相关问题