html页面中字体文件什么加载如果只是定义了font-face, 而没有任何地方使用，是不要加载字体文件的。定义了cl

@font-face {
  font-family: font1;
  src: url(./asserts/fonts/FZXKJW.ttf);
}

如果只是定义了font-face, 而没有任何地方使用，是不要加载字体文件的。

@font-face {
  font-family: font1;
  src: url(./asserts/fonts/FZXKJW.ttf);
}
.font1 {
    font-family: font1;
}

定义了class使用了font1, 如果没有页面中没有元素匹配.font1, 也不会加载文件。

body{
  font-family: font1;
}

只有有元素应用该字体后，字体文件才开始加载。

这会有些问题，比如实现下面的功能，点击按钮切换文本字体，如下所示:

onClick = () => {
    text.style.fontFamily = 'font1';
}

因为设置了text.style.fontFamily = 'font1', 字体文件才开始加载，所以效果会有一点延迟。

所以，我们其实可以先预加载字体，这里提供两种方式：

<link rel="preload" href="./asserts/fonts/FZXKJW.ttf2" as="font" type="font/ttf" crossorigin>
写隐藏元素，应用该字体。

.xxxxxx-font1{
  font-family: font1;
  width: 0;
  height: 0;
  overflow: hidden;
}

# 需要包含文字
<div class='xxxxxx-font1'>a</div>