代码之家  ›  专栏  ›  技术社区  ›  vatsal chauhan

即使在字体预加载时,文本加载也很慢

  •  0
  • vatsal chauhan  · 技术社区  · 5 月前

    与另一个文本相比,我页面中的一些文本出现在几秒钟后。

    我有不同的字体文件,用于不同的字体权重(取自font-sirrel的网络字体生成器)。 当我在某个点击事件中加载组件时,常规字体后会出现半粗体字体。经过一些研究,我了解到浏览器只加载所需的字体。Para字体是在加载该组件之前使用的,因此它已经加载到浏览器中供使用,因此可以感知到半粗体字体的延迟。

    一、 preload index.html中的半粗体字体(这是一个react/vite app . <link rel="preload" href="/src/assets/barlow/barlow-semibold-webfont.woff2" as="font" type="font/woff2" crossorigin /> 这会在使用字体之前加载字体(可以在开发工具的网络选项卡上看到),但文本仍然出现在常规字体之后:(但我认为它有点快)。

    然后,我只需设置一个使用该字体的元素,并在我的 App.jsx

          <p
            id="preload-fonts"
            style={{
              position: 'absolute',
              left: '-100vw',
              opacity: '0',
              fontFamily: 'barlowsemibold',
            }}
          >
    

    瞧,它奏效了。

    我想知道它为什么有效,为什么preload在加载组件之前仍然下载了字体,但却没有成功。

    我的 repo 组件名称(LoadingScreen.jsx)

    1 回复  |  直到 5 月前
        1
  •  1
  •   Harsh    5 月前

    使用预加载,我们的自定义字体被下载,但尚未使用或呈现。字体只有在页面上实际使用时才会完全激活(即被实际文本或不可见文本使用[如您的破解])。

    您的黑客攻击迫使浏览器应用字体并将其呈现在不可见的文本上,因此下次出现实际文本时,我们的字体会被加载、缓存和激活,以便立即应用,没有任何延迟。

    额外一点:我们可以使用{font-display:swap}来减少加载自定义字体文本的延迟,但黑客工作正常,我认为这是确保文本加载自定义字体而没有任何延迟的最佳方法。