嵌入式字体未呈现或下载

Question

我已经被困在这个问题上一个小时了。显然我不知道我在做什么...

下面的嵌入有什么问题？检查网络选项卡，fonts.css 正在加载，但网络选项卡甚至没有尝试下载任何网络字体。

我做错了什么？

浏览器： Google Chrome（最新版本）

fonts.css

@font-face {
font-family: 'PTSans';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/PT_Sans-Web-Regular.ttf) format('truetype'),
      url(../fonts/PT_Sans-Web-Regular.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'PTSans';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/PT_Sans-Web-Bold.ttf) format('truetype'),
        url(../fonts/PT_Sans-Web-Bold.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

main.css

html, body {
   font-family: 'PTSans', serif;
   ...etc
}

index.html

<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=10">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"> 
        <link href="css/fonts.css" rel="stylesheet">
        <link href="css/main.css" rel="stylesheet">
...etc

编辑：是的...我确实检查了目标文本是否设置了正确的字体系列。在此处查看证明：

（它使用衬线呈现 - 所以是的，我断然确定 CSS 指向是正确的）

这是文件夹结构...（同样，浏览器甚至不会尝试下载被引用的文件...所以如果文件不存在也没关系...我应该至少在网络面板中看到 activity...)

如有任何帮助，请提前致谢。

Answer 1

根据你的图片我可以看到你将文件夹命名为 font 但是 url() 的 src 属性有字体:

src: url(../fonts/PT_Sans-Web-Regular.ttf) format('truetype'),
      url(../fonts/PT_Sans-Web-Regular.woff2) format('woff2');

嵌入式字体未呈现或下载

Embedded font is not rendering or downloading

html

css

embedded-fonts

webfonts