css font-weight 属性不适用于按钮答案

【问题标题】：css font-weight property not working with buttonscss font-weight 属性不适用于按钮
【发布时间】：2019-09-10 07:01:29
【问题描述】：

我使用了谷歌字体中的“ubuntu”字体。我需要字体粗细：300，但按钮的字体粗细属性不起作用。它仍然是粗体。


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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案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;
}

希望这些帮助之一！

【讨论】：