对 CSS 样式表的更改不会反映在 Angular.js 按钮中。 JS 是否覆盖 CSS？

Question

我正在尝试更改 Angular/HTML 元素的字体和边框布局。但是，我的样式表中的更改对显示没有影响。

第一部分的代码是：

                                <div class="wizard-p">
                                    Are there specific industries you are particularly interested in advising? (check
                                    all that apply):
                                    <button type="button" class="btn btn-default" data-bs-select data-html="1" data-multiple="1"
                                    data-animation="am-flip-x" data-ng-model="advisor.industries"
                                    data-ng-change="validity.category=validate_advisor(3, advisor)"
                                    data-ng-options="industry for industry in industry_list">
                                        Action
                                        <span class="caret"></span>
                                    </button>
                                </div>

                            </div>

每个包含字体规范的类都设置为： BrandonGrotesque-Regular, "Helvetica Neue", Helvetica, Arial, sans-serif;

但是，它仍然呈现新罗马时代。 Javascript 会覆盖这个字体规范吗？

Answer 1

内联 HTML 几乎总是覆盖 CSS，而 JS 通过写入内联 HTML 来设置样式。我将首先检查您的 HTML 和 JS 中的任何样式设置。

但是，在这种情况下，BrandonGrotesque-Regular 或 Helvetica Neue 似乎不是网络安全字体。因此，文本应该在 Helvetica 中呈现，这是您规范中的第一个网络安全字体，看起来非常接近 TNR。 可以找到或多或少完整的网络安全字体列表here

您也可以像这样在 CSS 中嵌入自己的字体：

@font-face {
    font-family: "Copperplate Gothic Bold";
    src: url("/font/COPRGTB.TTF");
}

然后调用它：

font-family: 'Copperplate Gothic Bold';