英文:
CSS @font-face rule making <h1> tag bold
问题
我在概念上学习 @font-face 时感到困惑。请查看下面的代码。<h1> 标签中的文本加粗，而 <div> 中的文本（使用 CSS，网站可以使用）是正常的。
那么为什么 <h1> 标签选择 sansation_bold.woff 文件而不是 sansation_light.woff 文件？
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
font-weight: normal;
}
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
* {
font-family: myFirstFont;
}
</style>
</head>
<body>
<h1>The @font-face Rule</h1>
<div>
With CSS, websites can use <b>fonts other than the pre-selected "web-safe" fonts</b>.
</div>
</body>
</html>
我反转了加粗和正常规则的顺序，即首先放置了加粗规则，然后是正常规则，以为这可能是由于最近性导致的，但结果是相同的：
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
font-weight: normal;
}
英文:
I am getting confused in learning @font-face conceptually. Please see the below code. The text in <h1> tag is getting bold while the text of <div> (With CSS, websites can use) is normal.
So why <h1> tag is choosing sansationbold.woff file instead of sansation_light.woff ?
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
font-weight: normal;
}
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
* {
font-family: myFirstFont;
}
</style>
</head>
<body>
<h1>The @font-face Rule</h1>
<div>
With CSS, websites can use <b>fonts other than the pre-selected "web-safe" fonts</b>.
</div>
</body>
</html>
I reversed the sequence of bold and normal rules i.e, put bold rule first and then normal thinking it might be due to recency, but result is same:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
font-weight: normal;
}
答案1
得分: 1
正如我上面评论的，H1标签具有以下默认样式：
h1 {
display: block;
font-size: 2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
使用浏览器开发者工具可以让您看到应用了哪些样式以及在哪里应用了这些样式。
这就是为什么许多网站使用Normalize CSS文件，它有助于在所有浏览器上创建一个基准，因为所有浏览器都为特定的CSS属性分配默认值，而每个浏览器都设置了不同的默认值。
英文:
as I commented above, H1 tags have the following default styles:
h1 {
display: block;
font-size: 2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold; }
Making use of the browser developer tools will let you see where/what styles are being applied.
This is why you see many sites make use of a Normalize CSS file that helps create a baseline across all browsers, since all browsers assign default values to specific CSS properties, and each browser sets different ones.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论