Question

我尝试使用@ font-face实现字体。
如标题所示，它不起作用，我也不知道为什么。

我正在使用最新版本的Firefox。
我确定路径是正确的。

编辑：
该文件夹如下所示：
-网站
main.html
main.css
-字体
-ProductSans
ProductSansRegular.ttf
ProductSansRegular.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>

Answer 1

可能是因为链接问题导致无法加载字体。

fonts/....

仅当您的字体文件夹位于相同的css目录中时才能工作。

如果您的文件夹位于css文件夹之外并且位于项目的主文件夹中，那么您将必须使用相对路径，因此所有链接都将如下所示：

"../fonts/ProductSans/ProductSansRegular.ttf"

，当您使用字体时，请使用双引号。

body {
    font-family: ProductSans;
}

You can check here for more about font face rule

CSS-@ font-face实现的字体未加载

1 个答案: