使用@font-face NOT WORKING 添加自定义字体 css

Question

我正在尝试从 [DaFont.com (CaviarDreams)][1] 加载自定义字体，在 css 中使用 @font-face。我使用这个：https://www.fontsquirrel.com/tools/webfont-generator 我在 css:

中得到这个

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 13, 2018 */



@font-face {
    font-family: 'caviar';
    src: url('font/caviardreams-webfont.eot');
    src: url('font/caviardreams-webfont.eot?#iefix') format('embedded-opentype'),
    src: url('font/caviardreams-webfont.woff2') format('woff2'),
    src: url('font/caviardreams-webfont.woff') format('woff'),
    src: url('font/caviardreams-webfont.svg#caviar_dreamsregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
p   {
 font-size:40px;
 font-family:caviar;
}

<!DOCTYPE html>
<html lang="fr-FR">
<head>
 <title>test</title>
 <link rel="stylesheet" href="styles.css">
 <meta charset="UTF-8">
</head>
<body>
<p>test<p>
</body>
</html>

但是没用！
（编辑）你能帮帮我吗？

Answer 1

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

你的 css class 不正确。
在字体 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>

希望对您有所帮助，

使用@font-face NOT WORKING 添加自定义字体 css

Add custom font css with @font-face NOT WORKING

html

css

font-face

font-family