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：灰度;'属性解决了这个问题。最终的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;
}

非常感谢你的帮助！

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

1 个答案: