英文:
What's font-weight doing in font-face since I need to set it for the element too?
问题
不明白。我有以下CSS：
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
}
h1 {
font-family: Poppins;
}
还有以下HTML：
<h1>
你好，世界！
</h1>
为什么h1的字体粗细没有设置为400呢？
要使h1具有font-weight: 400，我需要在h1元素中设置它，如下所示：
h1 {
font-family: Poppins;
font-weight: 400;
}
否则，字体粗细将为粗体。
没有font-weight: 400的演示：链接
具有font-weight: 400的演示：链接
因此，问题是：
为什么我应该在@font-face中设置font-weight，因为它不被考虑？
英文:
I really don't get it. I have the next css:
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
}
h1{
font-family:Poppins;
}
And the next html:
<h1>
Hello world!
</h1>
Why isn't the h1 font weight set as 400 ?
To make the h1 to have font-weight:400, I need to set it in the h1 element, as this:
h1{
font-family:Poppins;
font-weight:400;
}
Else, the font-weight will be bold.
Demo without font-weight:400 for h1 https://jsfiddle.net/7kbnr6gz/
Demo with font-weight:400 for h1 https://jsfiddle.net/keg4w5nh/
So, the question is:
Why should I set the font-weight in the @font-face, since is not taked in consideration ?
答案1
得分: 1
h1的默认字体粗细是粗体，所以除非你明确设置不同的字体粗细，否则样式将保持不变。你在@font-face规则中声明了一个字体，其粗细为400，但这只是为字体资源提供了一个特性描述，它不会覆盖样式。看起来你正在访问的字体文件实际上是正常字体粗细，所以可能的情况是浏览器应用了粗体刺激，因为样式指定了粗体。
英文:
The default font-weight for h1 is bold, so unless you set a different font-weight explicitly, that’s what the style will have. You declared a font in the @font-face rule with weight 400, but that just provides a characterization for the font resource; it doesn’t override the style. It appears the font file you’re accessing really is a regular weight, so what is probably happening is that the browser is applying bold stimulation, since the style specifies bold.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论