时间戳

首页 > 解决方案 > 使用@font-face 添加自定义字体 css NOT WORKING

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

问题描述

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

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

标签： htmlcssfont-facefont-family

解决方案

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

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

希望这可以帮助，

推荐阅读