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

因此，在我的网站上对其进行测试后，我发现了一些问题：

您的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>

希望这会有所帮助，

使用@ font-face添加自定义字体CSS无效

1 个答案: