html - 浏览器呈现安全字体而不是本地

Question

当我在 chrome 或 firefox 中打开 devtools 时，找到我的 .page-header__hero-motivation 并看到渲染字体是 Comic Sans，而不是 Caveat。

@font-face {
  font-family: "Caveat";
  src: url("../fonts/Caveat-Regular.woff2") format(woff2),
    url("../fonts/Caveat-Regular.woff") format(woff);
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.page-header__hero-motivation {
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-size: 18px;
  color: #8E80A9;
}

My website tree

index.html
css -> style.css
fonts -> Caveat-Regular.woff2 & Caveat-Regular.woff

从 googlefonts 获取此字体并在线转换为 woff&woff2。

chrome devtools

Answer 1

似乎 Comic Sans 是通用系列而不是字体系列。不要同时设置两者，只需设置字体或通用系列，另请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/font-family 告诉我它是否有效，否则请发布完整代码。