Question

我刚刚在Bootstrap中看到它在两个地方使用font-family，一个在html，另一个在body：

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

......并经过多行：

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}

那么，为什么font-family在两个地方使用不同的字体？

Answer 1

Bootstrap.css中定义的第一组样式实际上是Normalize.css。 Noramlize.css组成了Bootstrap.css的first 189 lines。

如果我们看一下未经宣传的版本，带注释的完整代码片段实际上是：

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

为什么定义了两次？因为它们捆绑了Normalize.css而没有修改为font-family元素本身定义html的CSS文件。

Normalize.css只是将基本字体设置为sans-serif。他们带有注释的CSS文件说明：

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

Answer 2

现在使用LESS构建Bootstrap。这意味着CSS是使用变量和各种不同的文件构建的，这些文件有时会重叠或在不同的地方设置值。

首先，它使用normalize.less来确保所有内容都恢复到基本标准。

第1 - 13行

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

//
// 1. Set default font family to sans-serif.
// 2. Prevent iOS and IE text size adjust after device orientation change,
//    without disabling user zoom.
//

html {
  font-family: sans-serif; // 1
  -ms-text-size-adjust: 100%; // 2
  -webkit-text-size-adjust: 100%; // 2
}

然后在scaffolding.less文件中设置正文，该文件设置了引导程序的所有基础知识。

第26-33行

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

这也发生在SASS编译器中。

Answer 3

进入引导程序LESS后，很容易理解。

它不是规则或解决方法只是库冲突。

html {}来自normalize.css内部引导程序。

body {}来自引导程序本身。

Answer 4

那是因为Bootstrap使用了一个重置样式表（可能与bootstrap一起打包成一个缩小版本）。重置样式表的目标是减少浏览器在默认行高，边距和标题字体大小等方面的不一致性。

在这种情况下，字体系列重置是多余的，因为Boostrap会立即更改主体上的字体。与非常小的收益相比，删除所有冗余复位CSS将是很多工作。

为什么font-family在bootstrap中处于两个位置？

4 个答案: