自定义字体在某个 html/css 项目中不起作用

Question

我无法将项目中的字体更改为自定义字体。但是下面的代码在单独的测试用例中确实有效，但我不知道为什么这在我的工作项目中不起作用。我不知道是什么导致了这个问题。

• 我可以将字体更改为一些默认字体，但不能更改为自定义字体。

  @font-face{
    font-family: nazanin;
    src: url(nazanin.ttf);
  }
  
  .customFont{
    font-family: nazanin;
  }
  

  <h1 class="nazanin">This is a custom Font</h1>
  

Answer 1

首先，你的字体路径真的是nazanin.ttf吗？它与当前 CSS 文件位于同一文件夹中吗？

如果它位于一个名为“fonts”的单独文件夹中，请尝试如下操作：

@font-face{
  font-family: nazanin;
  src: url(../fonts/nazanin.ttf);
}

其次，.ttf 文件扩展名适用于 Safari、iOS 和 Android。您使用的是其他浏览器吗？如果是这样，那就是问题所在。我建议使用 .woff 扩展，因为它与大多数现代浏览器兼容。