文章/答案/技术大牛

发布

社区首页 >问答首页 >css - @ font -face实现的字体未加载

问css - @ font -face实现的字体未加载
EN

Stack Overflow用户

提问于 2019-08-13 00:05:42

回答 1查看 309关注 0票数 0

我尝试使用@ 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>

html

css

fonts

font-face

font-family

回答 1

Stack Overflow用户

发布于 2019-08-13 00:58:20

可能是因为你的链接有问题，所以你的字体没有加载。

fonts/....

只有当您的fonts文件夹位于同一css目录中时才有效。

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

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

当你使用你的字体时，不要用双引号。

body {
    font-family: ProductSans;
}

You can check here for more about font face rule

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57464605

复制

相似问题

问css - @ font -face实现的字体未加载
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css - @ font -face实现的字体未加载EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css - @ font -face实现的字体未加载
EN