html - 自定义字体未加载

Question

我正在尝试将 Gotham 字体上传到我正在构建的网站，但它不起作用。我在这里和通过谷歌进行了搜索，除了语法上传问题之外看不到问题是什么，我无法发现希望另一双眼睛可以发现。

我之前在 Rails 应用程序上加载过自定义字体，但从来没有在纯前端网站上加载过，所以不确定是否有一些明显的东西被我忽略了。我已经设置了一个字体文件 - Gotham_fonts - 并且其中有六个文件，全部带有 .otf 扩展名。

样式.css

@font-face {
  font-family: 'Gotham-Book';
  src: url('Gotham_fonts/Gotham-Book.otf') format('otf');
}

body {
  font-family: 'Gotham-Book', arial, sans-serif;
}

我尝试了几种不同的变体，也尝试了 !important 但没有任何结果。我的字体文件夹实际上应该在我的 CSS 文件夹内吗？

Answer 1

您拥有的代码大部分都可以，但您使用了不正确的格式字符串:

@font-face {
  font-family: 'Gotham-Book';
  src: url('/Gotham_fonts/Gotham-Book.otf') format('opentype');
}

使用字体文件的正确路径也很重要，有几个选项:

• 您可以使用从根开始的绝对路径，url('/Gotham_fonts/Gotham-Book.otf')，这是首选方式，因为无论字体位于何处，它都可以工作文件被引用。唯一的缺点是，如果您有一个测试环境，其中每个元素都是一个文件夹，那么它只能在生产环境中工作。

• 您可以使用相对路径，但在这种情况下您需要将其相对于 CSS 文件放置，例如，如果 CSS 文件是 Gotham_fonts 的父文件夹，您可以使用 url('Gotham_fonts/Gotham-Book.otf') ，但如果它位于例如在 CSS_files 文件夹中，您必须使用 url('../Gotham_fonts/Gotham-Book.otf')。