无法覆盖Bootstrap的默认排版和标题CSS样式

Question

我真的很难覆盖Bootstrap的一些默认CSS样式，更具体地说是排版和标题。请看下面的示例：

http://silvasonic.com/boostrap/index-001.html

期望的结果应该类似于下面的屏幕截图：

http://silvasonic.com/boostrap/screen.png

出于某种原因，标题-甚至下面的段落-被强制加粗，无论我做什么。字体有两个粗细(400,700)，但是当我试图显式地声明700为粗体时，它得到了某种双粗体。我也知道Bootstrap对标题的默认字体粗细是500，但我应该能够覆盖它。

我尝试了一些不同的想法-甚至包括！重要的-但似乎都不起作用。

任何/所有的反馈和帮助都非常感谢。

谢谢!

Answer 1

正如@Christina (参见下面的评论)所建议的那样，添加-webkit-font-smoothing: antialiased;和'-moz-osx-font-smoothing: grayscale;‘属性解决了这个问题。最终的CSS如下所示：

h3 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-size: 24px;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

h4 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size: 22px;
color: #777;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

非常感谢你的帮助！