@font-face 不起作用字体不会改变

Question

一切正常，除了字体没有改变。我不知道问题是关于字体的相对路径还是我的语法或脚本不正确。 Folders structure

我的Html代码：

<head>
<link rel="stylesheet" type="text/css"  href="styles/mystyle.css">
</head>
<body>
<div class="text">
      <h1>lorem ipsum.</h1>
      <p>Consectetur adipiscing elit.
      Nulla condimentum tortor sem,
      in semper nisl bibendum eu.</p>
    </div>
</body>

/* My css code: */

@font-face 
{
  font-family: "myFirstFont";
  src: url(test-site\fonts\Gotham-Book.otf) format('opentype');
}

.text p
{
  font-size:1vw;
  font-family:myFirstFont;
  color:#f2f2f2;
}

Answer 1

将字体 url 中的反斜杠 (\) 替换为两个反斜杠 (\) 或一个正斜杠 (/)。

如果您使用一个反斜杠，它将被识别为转义字符，一种对字符序列中的后续字符调用替代解释的字符。

因此您的代码应如下所示：

@font-face 
{
    font-family: "myFirstFont";
    src: url(./fonts/Gotham-Book.otf) format('opentype');
}

@font-face 不起作用字体不会改变

@font-face doesn't work the font does not changes

html

css

fonts