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

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

preloading fonts web reactjs

vatsal chauhan · 技术社区 · 9 月前

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

我有不同的字体文件,用于不同的字体权重(取自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)