html - 如果这两种样式具有相同的 css 属性，为什么它们呈现不同？

<分区>

您可以看到现场演示 here .

问题如下，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

当我检查 chrome 中的元素时，计算的样式完全相同，除了 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;

这很奇怪，因为所需的字体粗细实际上正常，但这是我能找到的唯一明显的区别。

你能指出问题出在哪里吗？

最佳答案

我认为这只是一种光学效应。我更改了标题文本，它们呈现相同。 (efecto óptico ;))

关于html - 如果这两种样式具有相同的 css 属性，为什么它们呈现不同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15097218/