自定义字体未加载

Question

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

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

style.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

首先：使用 https://www.fontsquirrel.com/tools/webfont-generator 生成字体的 OTF、TTF、EOT 和 WOFF 版本，因为这四种版本在某些浏览器中都是 used/preferred，因此您不妨将它们全部添加。

其次：您的 css（您的 html 没问题）应该类似于：

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

../ 假设您的 css 文件夹和 'Gotham_Fonts' 文件夹位于同一父目录中。

如果有帮助请告诉我！

Answer 2

您的代码基本没问题，但您使用了错误的格式字符串：

@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').

Answer 3

不确定它是否是我正在使用的文件（我怀疑它可能是）所以我尝试了不同的字体系列集合并最终得到了这样的工作路径 -

@font-face {
    font-family: 'geomanistregular';
    src: url('../fonts/geomanist-regular-webfont.eot');
    src: url('../fonts/geomanist-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/geomanist-regular-webfont.woff2') format('woff2'),
         url('../fonts/geomanist-regular-webfont.woff') format('woff'),
         url('../fonts/geomanist-regular-webfont.ttf') format('truetype'),
         url('../fonts/geomanist-regular-webfont.svg#geomanistregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

实际上是一个很好的字体。感谢所有帮助过的人:)

自定义字体未加载

Custom fonts not loading

html

css

fonts

font-face