为什么@font-face 在我的风格 sheet 中失败了？

Question

我想在我的风格中指定自定义字体 sheet。我可以在 html header 中的 link 语句中使用该字体，但我宁愿将其放入我的样式 sheet 中。当我取消注释 link 语句时，它起作用了。这是我的 html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font Bug</title>
  <link rel="stylesheet" href="fontBug.css">
<!--  <link href='https://fonts.googleapis.com/css?family=Metamorphous' rel='stylesheet'>-->
</head>
<body>
  <p>This is normal text. It should display in a sans-serif font in black against white.</p>
  <p class="customFont">This text should use the custom serif font, in a custom color</p>
<p>When I uncomment the link line inside the head tag of the html file, the 
  font works. I don't understand why it doesn't work from the style sheet.
  I know it's using the style sheet because I get the custom colors.
</p>
</body>
</html>

这是我的 .css 文件：

@font-face {
  font-family: Metamorphous;
  // I have tried it both with and without the format specifier.
  src: url(https://fonts.googleapis.com/css?family=Metamorphous) format("truetype");
}

.customFont {
  font-family: Metamorphous, Sans-Serif;
  background-color: #294575;
  color: #6291D8;
}

body {
  font-family: Sans-Serif;
  font-size: 24px;
}

Answer 1

我认为您可能在样式表中以错误的方式实现了它。尝试替换

@font-face {
  font-family: Metamorphous;
  // I have tried it both with and without the format specifier.
  src: url(https://fonts.googleapis.com/css?family=Metamorphous) format("truetype");
}

和

@import url('https://fonts.googleapis.com/css2?family=Metamorphous&display=swap');

h1 {
  font-family: 'Metamorphous', cursive;
}

这似乎有效

@import url('https://fonts.googleapis.com/css2?family=Metamorphous&display=swap');

h1 {
  font-family: 'Metamorphous', cursive;
}

<h1> Test </h1>

Answer 2

@font-face 用于导入您自己设计的字体。

但 Metamorphous 是一种网络安全字体，可以使用其他人已经说过的方法导入它。

Answer 3

我的问题是我误解了 url() 函数的含义。我以为它是针对 Web 资源的 URL，但它实际上是针对本地文件的路径。事实证明，font-face 实际上是指安装在服务器上的字体，而不是通过 URL 访问。人们一直告诉我这是为了“自己设计的字体”。这包括但不限于您设计的字体。我没有设计字体，但是我把它下载到我的开发环境中，并将 font-face url 设置为该文件的相对路径（相对于 .css 文件）并启动在职的。我不知道他们为什么称它为 url 函数，但替代方法 local() 显然是用于安装在本地计算机中的字体。谢谢两位回答的人。他们的回答引导我找到了这个解决方案。

为什么@font-face 在我的风格 sheet 中失败了？

Why does @font-face fail in my style sheet?

html

css

font-face