Question

我正在尝试将Gotham字体上传到我正在构建的网站，但它无法正常工作。我在这里搜索并通过谷歌，除了语法上传问题，我无法看到问题，我无法发现，希望另一双眼睛可以。

我之前在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，但没有尝试。我的fonts文件夹应该在我的CSS文件夹中吗？

Answer 1

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

其次：你的CSS（你的HTML很好）然后应该看起来类似于：

../

main假设您的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的父文件夹，则可以使用{{ 1}}就像你一样，但如果它位于例如在url('Gotham_fonts/Gotham-Book.otf')文件夹中，您必须使用CSS_files。

Answer 3

不确定是否是我正在使用的文件（我怀疑它可能已经存在）所以我尝试了一个不同的font-family集合，最后得到了这样的工作路径 -

@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;

}

实际上相当不错的字体。感谢所有帮助过的人：）

自定义字体未加载

3 个答案: