为什么 bootstrap 在 Sass 中有两种字体？

Question

我正要使用 Bootstrap SASS 更改默认字体，结果发现：

//== Typography
//
//## Font, line-height, and color for body text, headings, and more.

$font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-serif:       Georgia, "Times New Roman", Times, serif !default;

在这种情况下，无衬线和衬线有什么区别？因为如果我检查我的页面，所有字体都是 Helvetica Neue。

如果我看到的只是使用 Helvetica Neue，那么衬线/Georgia 是如何使用的？

Answer 1

这些只是更改字体base 样式的选项，因此如果您需要衬线或无衬线。他们这样做：

创建三个基本样式：

$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;

然后在基础变量上设置sans-serif：

$font-family-base: $font-family-sans-serif !default;

并使用该基础定义 body 的字体系列，因此所有文档：

body {
   font-family: $font-family-base;
   font-size: $font-size-base;
   line-height: $line-height-base;
   color: $text-color;
   background-color: $body-bg;
}

---

如果您想自定义主题并快速更改为衬线或等宽所有文档，则可以使用其他选项。