添加自定义字体 ttf 不起作用



我正在尝试向我的网站添加新字体。刚刚得到了我想要的字体的TTF文件(Gill Sans Light(。这是我的测试代码

main.css:-

@font-face {
font-family: 'Gill Sans Light';
src: url('fonts/gill-sans-light.ttf') format('truetype');
}

index.html:-

<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/main.css" type="text/css" media="all"/>     
</head>
<body>
<div class="landing">
<div class="logo">
<div class="title">
<span style="font-family: 'Gill Sans Light'">Testing Font</span>
</div>                
</div>
</div>
</body>
</html>

但是当我在浏览器中打开index.html时,它不起作用。此外,在 Chrome 上它显示了错误 -

Failed to load resource: net::ERR_FILE_NOT_FOUND    gill-sans-light.ttf

这对我来说毫无意义,因为文件在那里,我已经三次检查了文件名错误。

我知道有很多相关的问题。但是没有一个解决方案真正帮助我。我该如何解决这个问题?

文件gill-sans-light.ttf应存在于以下路径中:

css/fonts/gill-sans-light.ttf

main.css文件位于css文件夹中,并且引用是fonts/gill-sans-light.ttf,因此此路径应位于css文件夹中。

最新更新