我正在尝试向我的网站添加新字体。刚刚得到了我想要的字体的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
文件夹中。