我尝试使用@ font-face实现字体。
如标题所示，它不起作用，我也不知道为什么。
我正在使用最新版本的Firefox。
我确信路径是正确的。
编辑：
该文件夹如下所示：
-网站
main.html
main.css
-字体
-ProductSans
产品SansRegular.ttf
产品SansRegular.otf
等等
@font-face {
font-family: "ProductSans";
src: url("fonts/ProductSans/ProductSansRegular.ttf") format("truetype"), url("fonts/ProductSans/ProductSansRegular.otf") format("opentype"), url("fonts/ProductSans/ProductSansRegular.woff2") format("woff2"), url("fonts/ProductSans/ProductSansRegular.woff") format("woff"), url("fonts/ProductSans/ProductSansRegular.eot") format("eot"), url("fonts/ProductSans/ProductSansRegular.svg") format("svg");
}
body {
font-family: "ProductSans";
}
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div>
test
</div>
</body>
最佳答案
可能是因为链接问题导致您的字体无法加载。
fonts/....
仅当您的字体文件夹位于相同的css目录中时才能工作。
如果您的文件夹位于css文件夹之外并且位于项目的主文件夹中，那么您将必须使用相对路径，因此所有链接都将如下所示：
"../fonts/ProductSans/ProductSansRegular.ttf"
当您使用字体时，请使用不带双引号的字体。
body {
font-family: ProductSans;
}
You can check here for more about font face rule
关于html - CSS-@ font-face实现的字体未加载，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57464605/