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

编辑：是的......我确实检查了预期的文本是否具有正确的字体系列。见证明：

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

这里是文件夹结构...（同样，浏览器甚至没有尝试下载被引用的文件......所以如果文件不是＆＃39;那么它就不重要了。 t present ...我至少应该在网络面板中看到活动......）

任何帮助都是适当的，谢谢你。

Answer 1

根据您的图片，我可以看到您将文件夹命名为 font ，但url()媒体资源的src有 字体：

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

嵌入字体无法呈现或下载

1 个答案: