自定义引导按钮字体答案

【问题标题】：Customize bootstrap button font自定义引导按钮字体
【发布时间】：2020-10-22 07:45:48
【问题描述】：

我正在使用 sass 版本的 Bootstrap，并希望自定义按钮的字体，使其与系统字体不同。

我没有看到任何会修改按钮字体系列的 sass/less 变量：http://getbootstrap.com/customize/#buttons

那么，我该如何实现呢？

【问题讨论】：

标签： twitter-bootstrap fonts sass

【解决方案1】：

按钮元素的font-family 继承自@font-family-sans-serif 变量。标准变量为"Helvetica Neue", Helvetica, Arial, sans-serif。你可以找到变量here。

你可以在你的 ccs 中覆盖 btn 类，比如：

.btn {
    font-family: SomeFont;
}

我建议在您自己的样式表中执行此操作，而不是更改引导程序。

【讨论】：

我使用了额外的 _bootswatch.scss 文件，其中覆盖了您推荐的 .btn 字体样式。似乎，就像 bootstrap 只是没有提供用于覆盖元素中的字体系列的变量。

【解决方案2】：

您可以创建另一个类来覆盖 btn 类

.yourownclass{
     font-family: "Arial Bold", Gadget, sans-serif;
     font-style: normal;
     font-size: 15px ! important; //to make fontsize bigger 
  }

你的 HTML 应该是这样的

    <input  type="submit" value="Submit" class="btn btn-primary yourownclass"/>

【讨论】：

【解决方案3】：

在 Bootstrap 4 中，SASS 变量 $input-btn-font-family 和 $btn-font-family 可用。

引导 4.5：

./node_modules/bootstrap/scss/_variables.scss

$input-btn-font-family:       null !default;
$btn-font-family:             $input-btn-font-family !default;


./node_modules/bootstrap/scss/_buttons.scss


.btn {

>  font-family: $btn-font-family;

【讨论】：