时间戳

首页 > 解决方案 > @font-face src:local() 不适用于某些字体

html - @font-face src:local() 不适用于某些字体

问题描述

@font-face src:local()不适用于Fira Code等某些字体，但适用于其他字体（如Comic Sans MS. 我错过了什么吗？

费拉代码：

<!DOCTYPE html>
<html>
  <head>
    <style>
      @font-face {
        font-family: 'Custom';
        src: local('Fira Code');
      }

      .font {
        font-family: 'Fira Code';
      }

      .font-face {
        font-family: 'Custom';
      }
    </style>
  </head>
  <body>
    <p>Fira Code: <span class="font">hijklmn</span></p>
    <p>Fira Code(@font-face): <span class="font-face">hijklmn</span></p>
  </body>
</html>

铬 91.0.4472.164：

Chrome 91.0.4472.164 Fira 代码

火狐 90.0：

Firefox 90.0 Fira 代码

漫画无女士：

<!DOCTYPE html>
<html>
  <head>
    <style>
      @font-face {
        font-family: 'Custom';
        src: local('Comic Sans MS');
      }

      .font {
        font-family: 'Comic Sans MS';
      }

      .font-face {
        font-family: 'Custom';
      }
    </style>
  </head>
  <body>
    <p>Comic Sans MS: <span class="font">hijklmn</span></p>
    <p>Comic Sans MS(@font-face): <span class="font-face">hijklmn</span></p>
  </body>
</html>

铬 91.0.4472.164：

Chrome 91.0.4472.164 Comic Sans MS

火狐 90.0：

Firefox 90.0 Comic Sans MS

更多信息：

标签： htmlcssbrowserfontsfont-face

解决方案

您可以使用url(fontName.ttf)而不是local('Fira Code')注意在 url 中没有引号，代码应如下所示。

<style>
@font-face {
  font-family: Fira;
  src: url(FiraCode-Regular.ttf);
}
</style>

该.ttf文件应与 html 文件位于同一目录中。您可以使用谷歌字体下载许多.ttf格式的字体

推荐阅读