Html 添加@font-face不起作用的自定义字体css

我正在尝试从[DaFont.com（CaviarDreams）][1]加载一个自定义字体，css中有@font-face。我使用这个：我在css中得到这个：

/*！由字体Squirrel生成(https://www.fontsquirrel.com)2018年7月13日*/
@字体{
字体系列：“鱼子酱”；
src:url（'font/caviardreams-webfont.eot'）；
src:url（'font/caviardreams webfont.eot？#iefix'）格式（'embedded-opentype'），
src:url（'font/caviardreams-webfont.woff2'）格式（'woff2'），
src:url（'font/caviardreams-webfont.woff'）格式（'woff'），
src:url（'font/caviardreams-webfont.svg#caviar_-dreamsregular'）格式（'svg'）；
字体大小：正常；
字体风格：普通；
}
p{
字体大小：40px；
字体系列：鱼子酱；
}

测试
测试

所以在我的网站上测试后，我发现了一些问题：

• p的css类不正确
• 在字体url列表中，用逗号分隔，而不是半列
• 我尝试了与您相同的步骤，只获得了woff和woff2文件。（因此需要从css中删除eot、svg路径）

我的代码是一个示例：

<style>
@font-face {
  font-family: 'caviar';
  src: url('font/caviardreams-webfont.woff2') format('woff2');
  src: url('font/caviardreams-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

p{
  font-family:caviar;
    font-weight:normal;
  font-style:normal;
}
</style>

<div>
  <p>Test</p>
</div>

@字体{
字体系列：“鱼子酱”；
src:url（'font/caviardreams-webfont.woff2'）格式（'woff2'）；
src:url（'font/caviardreams-webfont.woff'）格式（'woff'）；
字体大小：正常；
字体风格：普通；
}
p{
字体系列：鱼子酱；
字体大小：正常；
字体风格：普通；
}
试验

---

希望这有帮助，

您检查过开发工具了吗？网络选项卡中有404错误吗？没有，我没有这个错误…您还在css.p中添加了一个类，但在html中只有一个标记p。它永远不会应用于你的测试文本。我修改了它，但它仍然不起作用…它仍然不起作用。。。但请尝试链接到.ttf:@font-face{font-family:'caviar'；src:url（“）字体大小：正常；字体样式：正常；}p{font-family:caviar；字体大小：正常；字体样式：正常；}Test

链接只是下载ttf。但是如果我添加它，它会工作。你的文件结构如何？你的html文件与字体目录处于同一级别。其中的字体名称是否正确。