postcss-autoreset 用浏览器的默认值覆盖字体系列

Question

我正在使用 postcss-autoreset，它将 all: initial; 应用于我在 CSS 文件中设置样式的任何元素。

但是，当我尝试设置 body 元素的字体时，只有我没有在 CSS 中设置样式的元素才会获得该字体。我设置样式的元素恢复为浏览器的默认设置。这很奇怪。

all: initial; 似乎覆盖了font-face，因为当我在 Chrome 检查器中查看时，它显示为已覆盖。

作为下面的示例，我在页面上的所有元素都以Roboto 字体显示，但使用浏览器默认设置的标题中的文本除外。

app.css

@import "variables.css";
@import "header.css";
@import "footer.css";

body {
  font-family: 'Roboto';
  margin: 0 auto;
  display: block;
}

header.css

header {
    padding: 10px 0;
}

config.js（PostCSS CLI config.js 文件）

{
    "use": [
      "postcss-import",
      "postcss-cssnext",
      "lost",
      "rucksack-css",
      "postcss-autoreset",
      "postcss-font-magician"
    ],
    "input": "src/app.css",
    "output": "css/main.css",
    "local-plugins": true,
    "autoprefixer": {
      "browsers": "last 2 versions"
    }
}

这是 postcss 生成的输出：

@font-face {
  font-family: Roboto;
  font-style: italic;
  font-weight: 100;
  src: local("Roboto Thin Italic"),local(Roboto-ThinItalic),url(//fonts.gstatic.com/s/roboto/v15/12mE4jfMSBTmg-81EiS-YVQlYEbsez9cZjKsNMjLOwM.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/12mE4jfMSBTmg-81EiS-Yfk_vArhqVIZ0nv9q090hN8.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/12mE4jfMSBTmg-81EiS-YRsxEYwM7FgeyaSgU71cLG0.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: italic;
  font-weight: 300;
  src: local("Roboto Light Italic"),local(Roboto-LightItalic),url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at2fQcKutQXcIrRfyR5jdjY8.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at44P5ICox8Kq3LLUNMylGO4.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at4bN6UDyHWBl620a-IRfuBk.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: italic;
  font-weight: 400;
  src: local("Roboto Italic"),local(Roboto-Italic),url(//fonts.gstatic.com/s/roboto/v15/OiNnAEwKzzJkQCr4qZmeq_esZW2xOQ-xsNqO47m55DA.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/vPcynSL0qHq_6dX7lKVByfesZW2xOQ-xsNqO47m55DA.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/1pO9eUAp8pSF8VnRTP3xnvesZW2xOQ-xsNqO47m55DA.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: italic;
  font-weight: 500;
  src: local("Roboto Medium Italic"),local(Roboto-MediumItalic),url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0WfQcKutQXcIrRfyR5jdjY8.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0Y4P5ICox8Kq3LLUNMylGO4.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0YbN6UDyHWBl620a-IRfuBk.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: italic;
  font-weight: 700;
  src: local("Roboto Bold Italic"),local(Roboto-BoldItalic),url(//fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC2fQcKutQXcIrRfyR5jdjY8.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC44P5ICox8Kq3LLUNMylGO4.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC4bN6UDyHWBl620a-IRfuBk.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: italic;
  font-weight: 900;
  src: local("Roboto Black Italic"),local(Roboto-BlackItalic),url(//fonts.gstatic.com/s/roboto/v15/bmC0pGMXrhphrZJmniIZpWfQcKutQXcIrRfyR5jdjY8.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/bmC0pGMXrhphrZJmniIZpY4P5ICox8Kq3LLUNMylGO4.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/bmC0pGMXrhphrZJmniIZpYbN6UDyHWBl620a-IRfuBk.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 100;
  src: local("Roboto Thin"),local(Roboto-Thin),url(//fonts.gstatic.com/s/roboto/v15/PP2U5prMl9yvKSWVu6DtvPesZW2xOQ-xsNqO47m55DA.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/2tsd397wLxj96qwHyNIkxPesZW2xOQ-xsNqO47m55DA.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/vzIUHo9z-oJ4WgkpPOtg1_esZW2xOQ-xsNqO47m55DA.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 300;
  src: local("Roboto Light"),local(Roboto-Light),url(//fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUffY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfT8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  src: local(Roboto),local(Roboto-Regular),url(//fonts.gstatic.com/s/roboto/v15/5YB-ifwqHP20Yn46l_BDhA.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  src: local("Roboto Medium"),local(Roboto-Medium),url(//fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUfY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 700;
  src: local("Roboto Bold"),local(Roboto-Bold),url(//fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOPY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 900;
  src: local("Roboto Black"),local(Roboto-Black),url(//fonts.gstatic.com/s/roboto/v15/mnpfi9pxYH-Go5UiibESIvY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/mnpfi9pxYH-Go5UiibESIltXRa8TVwTICgirnJhmVJw.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/mnpfi9pxYH-Go5UiibESIj8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")
}

header,
header .brand,
header nav,
header nav li,
header nav a,
header nav,
header nav ul,
header nav li,
body,
body {
  all: initial
}

header {
  background: #00AFEC;
  display: block
}

header .brand {
  width: 100%
}

header nav li {
  display: block;
  text-align: center
}

header nav a {
  color: #FFF;
  text-decoration: none;
  font-size: 18px
}

@media (min-width: 361px) {
  header nav {
    width: 100%
  }
  header nav ul {
    float: right
  }
  header nav li {
    padding: 0 30px
  }
}

body {
  font-family: 'Roboto';
  margin: 0 auto;
  display: block;
}

知道为什么会这样吗？

Answer 1

postcss-autoreset 接受 reset 选项。默认情况下它只是all: initial，它会重置字体。但我建议在all: initial; font-family: inherit; font-size: inherit 中设置reset。

因此，在postcss-autoreset 中，您应该明确显示您真正想要继承的属性。您可以在reset 选项中默认设置一些继承属性。

Answer 2

通常字体系列由父元素继承。所以你可以使用一个简单的

html {
 font-family: Roboto;
}

要使整个页面使用 Roboto 字体，即使没有为您的元素明确定义字体系列 - 它们只是从其父级继承值 html（或在您的示例中为 body）。

如果您使用 postcss-autoreset，您设置样式的所有元素都将获得 all: initial; 属性，该属性会重置字体系列。因此这些元素不会有 Roboto font-family。

顺便说一句，我不建议您使用 postcss-autoreset。我根本看不出使用它的意义，因为它没有做太多（只添加 1 个道具/值），而且它有点打破了 css 继承概念。在我看来，人们应该主要使用 postcss 来平衡浏览器的不一致。 autoprefixer 和 postcss-fixes 之类的插件（是的，这里有一些自我推销）做得很好。如果你想替换你的预处理器 sass/less/stylus，像precss 这样的一些其他插件可能是有意义的，但是这个添加许多微插件的整个概念，导致意外的行为和输出，恕我直言太不稳定并导致更多问题比它解决的问题。