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

【问题标题】：Add custom font css with @font-face NOT WORKING使用@font-face 添加自定义字体 css NOT WORKING
【发布时间】：2018-07-13 12:04:40
【问题描述】：

我正在尝试从 [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>

但它不起作用！
（已编辑）你能帮帮我吗？

【问题讨论】：

你检查过你的开发工具，你有没有在网络标签中出现任何 404 错误。
不，我没有这个错误...
另外，您在 css '.p' 中添加了一个类，但在 html 中只有一个标签 p。它永远不会将其应用于您的测试文本。
我修改了，还是不行……

标签： html css font-face font-family

【解决方案1】：

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

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>

希望这会有所帮助，

【讨论】：

它仍然不起作用...但尝试使用指向 .ttf 的链接：
测试
链接只是下载ttf。但如果我添加它，它会起作用。您的文件结构如何与字体目录处于同一级别的 html 文件。那里的字体名称是否正确。