如何使用 css 将文本强制为“正常”（不是粗体）？

Question

我有一个类，我用它来制作一些深蓝色和大的文本：

 .sectiontext {
    color: navy !important;
    font-size: large;
}

我将它应用于这样的元素：

 <label class="sectiontext">Select a Unit</label>
. . .
<h4 class="sectiontext">Specify Recipients</h4>

问题是，当我将它应用于标签时，它会使该文本变为粗体。我尝试将以下行添加到 sectiontext 类：

 font-weight: normal !important;

…但这没有什么区别；我不想对某些文本使用“h4”而不是“label”，因为 h4 总是包含“换行符”；我希望能够在“选择”元素和几个复选框之前使用此文本样式，因此没有文本“中断”

但是即使在 sectiontext 类中添加了“!important”，文本仍然是粗体。例如，将此处的“选择一个单位”和“选择报告[s]”标签与 H4“指定收件人”和“生成并通过电子邮件发送报告”文本进行比较：

我该怎么做才能使标签不粗体？

更新

我唯一的自定义 CSS 是：

 body {
    padding-top: 50px;
    padding-bottom: 20px;
    background-color: lightyellow;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists
   will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.containerforplatypus {
    border: 2px solid #ccc;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin-bottom: 8px;
    padding: 6px;
}

.margin4horizontal {
    margin-left: 4px;
    margin-right: 4px;
}

.fancyorangetext {
    text-shadow: 0 0 6px orange !important;
    font-size: xx-large;
}

.leftmargin8 {
    margin-left: 8px !important;
}

.sectiontext {
    color: navy !important;
    font-size: large;
    font-weight: normal !important;
}

…否则，将只使用这些引导程序类：

 jumbotron
row
col-md-6
col-md-12
control-label
form-control
h3
h4
btn btn-primary
btn btn-sm

这两个有问题的标签（在上下文中）的整个 HTML 是：

 <div class="row">
    <div class="col-md-12" name="unitsCheckboxDiv">
        <label class="sectiontext">Select a Unit</label>
        <select class="form-control, dropdown">
            @foreach (var field in units)
            {
                <option id="selItem_@(field.unit)" value="@field.unit">@field.unit</option>
            }
        </select>
    </div>
</div>

<div class="row">
    <div class="col-md-12" name="unitsCheckboxDiv">
        <div class="containerforplatypus">
            <label class="sectiontext">Select Report[s]</label>
            @foreach (var rpt in reports)
            {
                <input class="leftmargin8" id="ckbx_@(rpt.report)" type="checkbox" value="@rpt.report" />@rpt.report
            }
        </div>
    </div>
</div>

更新 2

它现在可以工作，没有任何变化；它首先尝试了 fmz 的建议，但后来我再次尝试了我以前的方法，现在它可以工作了，即使没有“！重要”标记：

 .sectiontext {
    color: navy !important;
    font-size: large;
    /*font-weight: 400 !important; <= works */
    /*font-weight: normal !important; <= works now, as does the rule below */
    font-weight: normal;
}

原文由 B. Clay Shannon-B. Crow Raven 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

考虑使用：

标签 {font-weight: 400 !important}

还要指定字体大小，因为您的标签显示的字体看起来比正常字体大。

原文由 forrest 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

默认情况下，标签不是粗体。

尝试用以下方法覆盖它：

html label.sectiontext { font-weight: inherit; }

html 和标签名称将给予它一些优先权。如果继承不起作用，请尝试“正常”。

原文由 Rick 发布，翻译遵循 CC BY-SA 3.0 许可协议