时间戳

首页 > 解决方案 > @font-face 背后的规则是什么？

html - @font-face 背后的规则是什么？

问题描述

我正在学习 CSS，但我对 @font-face 感到困惑。

我见过很多网站在他们的 CSS 文件中使用了三到四次 @font-face，但字体粗细不同。

像下面的示例一样，创建三个具有相同名称的 @font-face。那么如果我创建一个将适用哪一个

标记并在其中使用 font-family: 'Test'。

@font-face {
  font-family: 'Test';
  src: url('path') format('woff2'),
  url('path') format('woff'),
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Test';
  src: url('path') format('woff2'),
  url('path') format('woff'),
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Test';
  src: url('path') format('woff2'),
  url('path') format('woff'),
  font-weight: 600;
  font-style: normal;
}

以下考试取自 w3schools。在这里，他们使用相同的字体系列名称定义了两次 @font-face。我的问题是如何决定将哪个字体系列应用于哪个元素？

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

div {
  font-family: myFirstFont;
}
</style>
</head>
<body>

<h1>The @font-face Rule</h1>

<div>With CSS, websites can use fonts other than the pre-selected "web-safe" fonts.</div>

</body>
</html>

标签： htmlcssfontsfont-face

解决方案

推荐阅读