Question

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

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

浏览器会执行额外的下载字体请求，因此使用默认字体时会有很短的时间，然后用新下载的字体替换它们。

我发现这种方式可以预加载字体，但是真的不知道如何在没有额外请求的情况下使用下载字体（不用担心，语法很细腻）：

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

这样您就不需要添加其他请求，因为您已经在文档中加载了字体。

检查以下示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: