postcss-autoreset使用浏览器的默认值覆盖字体家族

我使用的postcss-autoreset将all: initial;应用于我CSS样式中的任何元素。postcss-autoreset使用浏览器的默认值覆盖字体家族

但是，当我尝试设置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; 
}

任何想法为什么会发生这种情况？

来源

2016-08-03 BugHunterUK

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

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

来源

2016-08-04 10:07:31

我该在哪里提供重置选项？我正在使用'postcss-cli'和一个'config.json'文件，如下所示：https://github.com/JamesTheHacker/Simplex – BugHunterUK

这里是一个文档，如何在config.json中设置插件的选项'https://github.com/postcss/postcss-cli#--config-c –

正常情况下，字体族由父元素继承。所以，你可以使用一个简单的

html { 
font-family: Roboto; 
}

使整个页面中使用的Roboto字体，即使没有FONT-FAMILY您元素明确定义的 - 他们只是继承其父是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-04 07:50:30 MattDiMu

postcss-autoreset使用浏览器的默认值覆盖字体家族

回答

相关问题