HTML 预加载字体并在 css 中使用它

Question

我知道你们都知道，如果我们在 .css 文件中这样做：

@font-face {
        font-family: "Akrobat-Regular";
        src: url('/assets/Akrobat-Regular.otf') format("truetype");
      }
      body {
        color: #1c1c1c;
        font-family: "Akrobat-Regular" !important;
      }

浏览器将发出额外的下载字体请求，因此将在短时间内使用默认字体，然后将其替换为新下载的字体。

我找到了这种预加载字体的方法，但真的不知道如何在没有额外请求的情况下使用下载的字体（不用担心，ti as slim 语法）：

    link rel='preload' href='/assets/Akrobat-Regular.otf' as='font' type='font/otf'

    = stylesheet_link_tag 'application'

    css:
      @font-face {
        font-family: "Akrobat-Regular";
        src: url('/assets/Akrobat-Regular.otf') format("truetype");
      }
      body {
        color: #1c1c1c;
        font-family: "Akrobat-Regular" !important;
      }

Answer 1

您也可以使用预加载的字体，而无需创建字体。

<link rel="preload" href="your_font_file" as="font" type="font/woff" crossorigin="anonymous">

只需提及字体系列即可使用它：

font-family: "your_font";

这样您就不需要提出额外的请求，因为您已经在文档中加载了字体。

检查下面的示例：

<link rel="preload" href="your_font_file" as="font" type="font/woff" crossorigin="anonymous">

font-family: "your_font";