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')。