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

问题描述

我无法在项目中将字体更改为自定义字体。但是以下代码确实可以在单独的测试用例中工作，但是我不知道为什么这在我的工作项目中不起作用。我不知道是什么原因引起的。

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

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

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

解决方法

?

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

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

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

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