1

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

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

all: initial;似乎是压倒一切font-face的，因为当我在 Chrome 检查器中查看时，它显示为被覆盖。

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

应用程序.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;
}

知道为什么会这样吗？

4

2 回答 2

1

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

html {
 font-family: Roboto;
}

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

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

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

于 2016-08-04T07:50:30.203 回答
1

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

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

于 2016-08-04T10:07:31.753 回答