如何对几种字体类型之一使用链接预加载

Question

我有woff和woff2字体类型，浏览器检测到其中一种。 如果我使用链接预加载，则浏览器会下载两个文件。 如何仅预加载适当的字体文件？

ass

@font-face
  font-family: SegoeUI
  font-display: swap
  src: url('/fonts/Segoe UI Semibold.woff2') format('woff2'), url('/fonts/Segoe UI Semibold.woff') format('woff')
  font-weight: 600
  font-style: normal
  font-stretch: normal
  unicode-range: U+0020-1FFE

html

<link rel="preload" as="font" href="/fonts/Segoe UI Semibold.woff" type="font/woff" crossorigin>
        <link rel="preload" as="font" href="/fonts/Segoe UI Semibold.woff2" type="font/woff2" crossorigin>

Answer 1

您可以通过以下方式预加载字体

<link rel="preload" href="fonts/Segoe UI Semibold.woff" as="font" type="font/woff" crossorigin="anonymous">
<link rel="preload" href="fonts/Segoe UI Semibold.woff2" as="font" type="font/woff2" crossorigin="anonymous">

我没有办法下载所需的字体，您必须指定要使用的字体。