@font-face预加载

2022-10-23 615 阅读1分钟

背景

在写项目时，布局里使用了getBoundingClinentRect()来确定子元素的位置。使用@font-face导致，排版后错乱

原因

这是因为FOUT，浏览器会先加载普通的英文字体，然后再用指定的字体替换，因为前后字体格式大小不一致，导致这两次元素大小不一致（因为元素使用padding来撑开宽高的），在js通过getBoundingClientRect获取宽高时与最终宽高出现了差距。

推测

js应该是在第一次（普通字体）获取了宽高，然后使用@font-face定义的字体，替换掉原来的字体，才导致了这个差距。

解决

我的办法比较懒，没有使用一些库，来加载字体，然后通过回调再调用js来获取元素大小。

<body>
    <span class="font-load">font load</span>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
</body>
<style>
  @font-face {
    font-family: 'Pacifico';
    src: url('./src/assets/font/Pacifico-Regular.ttf');
  }
  .font-load{
    position: absolute;
    top: -100px;
    left: -100px;
    font-family: Pacifico;
  }
</style>

在html里将font-face的定义放到了最前面，然后给一个absolute定位的元素使用了这个字体，让他预加载（这算是预加载吗？）

PS

排版错乱的现象只在开发环境出现，我猜测可能是vite的bug（算是？）。在编译部署到githubpage后，不会出现排版错乱的现象