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

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

我找到了这种预加载字体的方法，但真的不知道 top 如何在没有额外请求的情况下使用下载的字体(别担心，ti as slim syntax):

    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

您可以使用 pre loaded fonts也无需创建字体。

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

只需提及要使用的字体系列即可:

font-family: "your_font";

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

检查以下示例:

div.rob {
  font-family: "Roboto";
  font-size: 20px;
}

<link rel="preload" href="https://github.com/FontFaceKit/roboto/blob/gh-pages/fonts/Regular/Roboto-Regular.woff" as="font" type="font/woff" crossorigin="anonymous">

<div class="rob">
  Hola in roboto
</div>

<div>
  Normal font
</div>