定制 Bootstrap 按钮字体

Question

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

我没有看到任何可以修改按钮字体系列的sass/less变量：http://getbootstrap.com/customize/#buttons 那么，我该如何实现呢？

- Boris Burkov

Answer 1

按钮元素的font-family属性从@font-family-sans-serif变量继承。该变量的标准值为"Helvetica Neue"，Helvetica，Arial，sans-serif。您可以在此处找到该变量。

您可以通过以下方式覆盖btn类中的样式：

.btn {
    font-family: SomeFont;
}

我建议您在自己的样式表中进行此操作，而不是更改bootstrap样式表。

- Gareth

---

我使用了额外的 _bootswatch.scss 文件，其中覆盖了您建议的 .btn 字体样式。看起来，Bootstrap 在元素中没有提供重写字体系列的变量。 - Boris Burkov

Answer 2

在Bootstrap 4中，SASS变量 $input-btn-font-family 和 $btn-font-family 可用。 Bootstrap 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;

- tophr

Answer 3

你可以创建另一个类来覆盖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"/>

- li bing zhao