CSS font-weight属性无法与按钮一起使用

Question

我使用了Google字体中的'ubuntu'字体。 我需要font-weight：300，但是按钮的font-weight属性不起作用。它仍然是大胆的。

<button type="button" class="btn btn-primary">Primary</button>

@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700&display=swap');

.btn {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 300;
}

Answer 1

.btn {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 300!important;
}

Answer 2

一种解决方案是在样式中使用！important，但这通常不是一个好主意：

.btn {
    font-weight: 300 !important;
}

您可以尝试在按钮上切换类的顺序，以使.btn类覆盖.btn-primary类，如下所示：

<button type="button" class="btn-primary btn">Primary</button>

或者，在需要启用字体粗细的文本周围设置一个<span>元素，以直接定位

<button type="button" class="btn btn-primary"><span class="boldz">Primary</span></button>
...
.boldz {
    font-weight: 300;
}

希望这些帮助之一！