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

Question

Everything works except that the font does not changes.一切正常，只是字体没有改变。 I dont know if the problem its about the path relative of the font or my syntax or script is not right.我不知道问题是否与字体的相对路径或我的语法或脚本有关。 Folders structure文件夹结构

My Html code:我的 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

Replace the backslash ( \ ) in the font url with either two backslashes ( \\ ) or one forward slash ( / ).将字体 url 中的反斜杠 ( \ ) 替换为两个反斜杠 ( \\ ) 或一个正斜杠 ( / )。

If you use one backslash, it will be recognized as an escape character, a character that invokes an alternative interpretation on subsequent characters in a character sequence.如果您使用一个反斜杠，它将被识别为转义字符，该字符对字符序列中的后续字符调用另一种解释。

So your code should look like this:所以你的代码应该是这样的：

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-07-10 16:21:14

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-07-10 16:21:14

解决方案1
0 已采纳 2020-07-10 16:21:14