CSS的font-weight属性在按钮上无效

Question

我使用了来自谷歌字体的“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;
}

- SUHAIL KC

---

可能是其他 CSS 正在覆盖。您能否分享 URL 以便更好地理解？ - Prakash Rajotiya

使用浏览器的Web控制台来检查应用的样式元素。 - DreamTeK

Answer 1

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

- Andy Thomas

---

使用!important标记不是一个好的方式。尽可能避免使用它 - 谢谢 - Prakash Rajotiya

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;
}

希望这其中之一能够帮到你！

- Georgios Dimitriadis