如何为引导程序设置 baseFontFamily？答案

【问题标题】：How can I set baseFontFamily for bootstrap?如何为引导程序设置 baseFontFamily？
【发布时间】：2013-11-16 14:12:46
【问题描述】：

我正在尝试在我的 bootstrap_and_overrides.css.scss 文件中设置基本字体系列，但由于某种原因，呈现的 HTML 仍然采用默认字体类型而不是覆盖它。有没有办法改变引导变量的默认值？

bootstrap_and_overrides.css.scss

@import "bootstrap";

$baseFontFamily: Arial,Helvetica,sans-serif  !default;
$baseFontSize: 11px !default;

渲染的css：

body {
    color: #333333;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857;
}

【问题讨论】：

标签： ruby-on-rails sass twitter-bootstrap-3

【解决方案1】：

这里有两个关于是否要更改源的链接：

http://www.codeproject.com/Articles/594098/How-to-customize-Twitter-Bootstrap-to-fit-your-web

或通过您的自定义 css.scss 文件更改源代码：

http://www.sitepoint.com/how-to-customize-twitter-bootstraps-design-in-a-rails-app/

基本上你想把你的覆盖放在导入引导程序之前。

$baseFontFamily: Arial,Helvetica,sans-serif  !default;
$baseFontSize: 11px !default;

@import "bootstrap";

字体系列定义为

@import "bootstrap";

@sansFontFamily: Arial,Helvetica,sans-serif
@serifFontFamily: Font you want

这些是 LESS 变量，应该在导入 bootstrap 之后定义。

【讨论】：

我按照您的建议更改了顺序，但没有运气。它仍然采用相同的默认家庭风格。
有趣的是，锚颜色正确覆盖。看起来这不是更改默认字体样式的正确方法。
我认为字体系列是通过 LESS 变量定义的。如果您查看第一个链接的中途，排版由@sansFontFamily: 定义，我已使用此信息更新了答案。
变量名称似乎已更改。我在下面添加了一个对我有用的答案，并且与最新的 bootsrap 文档同步

【解决方案2】：

根据最新的引导文档，此处描述了可以覆盖的 LESS 变量http://getbootstrap.com/customize/#less-variables

这里有几个例子：

@body-bg
@text-color
@font-family-sans-serif

由于您使用的是 SASS，只需将 @ 前缀替换为 $ 前缀即可。如下所示。

$body-bg
$text-color
$font-family-sans-serif

并在导入引导文件之前覆盖它们。

所以要覆盖基本字体系列，

// note: per the bootstrap docs above, $font-family-base inherits 
// from $font-family-sans-serif
$font-family-sans-serif: NewFont !default;

@import "bootstrap";

在此处查看有关 bootstrap-sass 的更多信息https://github.com/twbs/bootstrap-sass

【讨论】：

【解决方案3】：

这里的重点是你必须在正确的位置指定正确的变量名。

正确的变量名：bootstrap less variable names。 sass 语法需要将@ 字符更改为$。
正确的位置：在调用@import "bootstrap";之前定义您的自定义变量。如果引导程序已加载，您的自定义变量将永远不会被使用，这就是您的代码不起作用的原因。

在这种情况下，您的代码应该是：

bootstrap_and_overrides.css.scss

$font-family-base: Arial, "Helvetica", sans-serif;
$font-size-base: 11px;

@import "bootstrap";

【讨论】：

【解决方案4】：

您的变量名称不正确。应该是

$base-font-family:Arial, "Helvetica", sans-serif;

【讨论】：

【解决方案5】：

如果您使用的是 bootstrap-sass gem，则此变量的正确名称是

font-family-base 和 font-size-base

另外，来自SASS documentation：

如果变量尚未分配，您可以通过添加 !default 标志到值的末尾。这意味着，如果变量已经被赋值，它不会被重新赋值，但是如果它还没有值，它会被赋予一个。

!default 是 Ruby 中 ||= 运算符的 SASS 等价物。

因此，在您的情况下，以下将起作用：

$font-family-base: Arial,Helvetica,sans-serif
$font-size-base: 11px

【讨论】：