为什么字体系列在引导程序中位于两个位置？

Question

我刚刚在 Bootstrap 中看到它在两个地方使用 font- htmlfamily 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 的前 189 行。

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

/*! 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%;
}

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

Normalize.css 只是将基本字体设置为无衬线字体。他们的 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 */
}