gpt4 book ai didi

html - 在CSS中使用@font_face添加本地ttf字体

转载 作者:行者123 更新时间:2023-12-03 15:52:09 26 4
gpt4 key购买 nike

我正在尝试向正在测试的网站添加本地字体。它称为“AcrosstheRoad.ttf”,可以在我的assets/fonts/文件夹中找到。我正在做以下尝试将其读入CSS文件:

@font-face {
font-family: 'AcrosstheRoad';
src: url('assets/fonts/AcrosstheRoad.ttf') format('truetype');
}

我想将其用作特定的 header 类型,所以我正在使用
h3{
font-family: 'AcrosstheRoad';
color: #333;
}

但是不幸的是字体没有加载。有人知道我在做什么错吗?

谢谢!
克里斯蒂娜(Christina)

最佳答案

首先在assets之前添加一个斜杠:

(('/assets/fonts/AcrosstheRoad.ttf'))

这可能是问题,也可能不是问题,具体取决于CSS文件的位置以及网站的结构。

如果上述方法不起作用,请将字体转换为 .woff2.woff(尝试使用此字体: http://www.fontsquirrel.com/tools/webfont-generator)。其背后的原因是某些浏览器确实很挑剔。将您的CSS更改为:
@font-face {
font-family: 'AcrosstheRoad';
src: url('/assets/fonts/AcrosstheRoad.woff2') format('woff2'),
url('/assets/fonts/AcrosstheRoad.woff') format('woff');,
url('/assets/fonts/AcrosstheRoad.ttf') format('truetype');
}

关于html - 在CSS中使用@font_face添加本地ttf字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30020488/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com