字体不显示但没有错误

Question

在过去的几天里，我一直在为自己创建一个新站点，并且在我的本地主机上工作时字体没有问题，但现在上传到 GitHub 时，它们现在无法正常工作。所有文件都在那里，我检查了文件的命名。我已经在chrome的开发者选项中使用了那个网络选项卡来查看是否加载了字体

您可以在此处查看该网站-http://jamiecurd.github.io/ 其余代码在这里-https://github.com/jamiecurd/jamiecurd.github.io/tree/master/assets/font/montserrat

这是字体的加载

/*Fonts*/
@font-face {
  font-family: 'black';
  src: url('/assets/font/montserrat/Montserrat-Black.ttf') fromat('truetype'),
  src: url('../font/montserrat/Montserrat-Black.woff') format('woff');
}
@font-face {
  font-family: 'bold';
  src: url('/assets/font/montserrat/Montserrat-Bold.ttf') format('truetype'),
  src: url('../font/montserrat/Montserrat-Bold.woff') format('woff');
}
@font-face {
  font-family: 'extrabold';
  src: url('/assets/font/montserrat/Montserrat-ExtraBold.ttf') format('truetype'),
  src: url('../font/montserrat/Montserrat-ExtraBold.woff') format('woff');
}
@font-face {
  font-family: 'hairline';
  src: url('/assets/font/montserrat/Montserrat-Hairline.ttf') format('truetype'),
  src: url('../font/montserrat/Montserrat-Hairline.woff') format('woff');
}
@font-face {
  font-family: 'light';
  src: url('/assets/font/montserrat/Montserrat-Light.ttf') format('truetype'),
  src: url('../font/montserrat/Montserrat-Light.woff') format('woff');
}
@font-face {
  font-family: 'regular';
  src: url('/assets/font/montserrat/Montserrat-Regular.ttf') format('truetype'),
  src: url('../font/montserrat/Montserrat-Regular.woff') format('woff');
}
@font-face {
  font-family: 'semibold';
  src: url('/assets/font/montserrat/Montserrat-SemiBold.ttf') format('truetype'),
  src: url('../font/montserrat/Montserrat-SemiBold.woff') format('woff');
}
@font-face {
  font-family: 'ultralight';
  src: url('/assets/font/montserrat/Montserrat-UltraLight.ttf') format('truetype'),
  src: url('../font/montserrat/Montserrat-UltraLight.woff') format('woff');
}

Answer 1

这些问题与 CSS 文件中的 src 属性有关。查看以下屏幕截图：

正如您在下面的屏幕截图中看到的那样，解析“src”的值（在文件 style.css 中）存在错误。

1) 修复那些遵循W3S site 定义的规则。

2) 在您的 style.css 中，为您的规则和字体粗细指定正确的名称，以指示诸如字体“粗体”之类的值。

3) 对于未来，我建议您使用浏览器中的开发者工具来检测此类问题。

Answer 2

你的字体路径错误，去掉'truetype'路径中的'assets'试试这个

src: url('../font/montserrat/Montserrat-Black.ttf') fromat('truetype'),

你的格式也错了，试试这个格式

@font-face {
  font-family: 'Montserrat';
  src: url('../font/montserrat/Montserrat-Black.woff') format('woff'),
       url('../font/montserrat/Montserrat-Black.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}