使用 @font-face 不工作添加自定义字体 css

Question

I'm trying to load a custom font from [DaFont.com (CaviarDreams)][1], with @font-face in css.我正在尝试从 [DaFont.com (CaviarDreams)][1] 加载自定义字体，并在 css 中使用 @font-face。 I use this: https://www.fontsquirrel.com/tools/webfont-generator and I get this in css:我使用这个： 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>

But it don't work!但它不起作用！
(edited) Can you help me? （编辑）你能帮我吗？

Answer 1

So after testing it on my site I have found a few issues:因此，在我的网站上对其进行测试后，我发现了一些问题：

Your css class for p is not correct.您的 p 的 css 类不正确。
In the font url list you have comma separeeted insted of semicolumn在字体 url 列表中，你有半列的逗号分隔
I have tried the same steps as you have, and get only woff and woff2 files.我已经尝试了与您相同的步骤，并且只获得 woff 和 woff2 文件。 (So you need to remove the eot,svg paths from css) （所以你需要从 css 中删除 eot,svg 路径）

My code fo one example:我的一个例子的代码：

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

Hope this helps,希望这可以帮助，

使用 @font-face 不工作添加自定义字体 css

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-07-13 13:07:31

使用 @font-face 不工作添加自定义字体 css

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-07-13 13:07:31

解决方案1
0 已采纳 2018-07-13 13:07:31