Tauri应用中Figtree自定义字体仅部分元素生效问题排查

我在Tauri应用中尝试使用自定义字体Figtree，但只有部分元素能正常显示该字体，其余元素加载失败。

代码展示 #

HTML代码

<!DOCTYPE html>
<html>
  <head>
    <title>Window title</title>
    <link href="/style.css" rel="stylesheet"/>
  </head>
  <body>
    <div data-tauri-drag-region id="title-bar">
      <p id="title-bar-title">Window title</p>
      <button class="title-bar-button">Minimize</button>
      <button class="title-bar-button">Maximize</button>
      <button class="title-bar-button">Close</button>
    </div>
    <h1>This is a test.</h1>
  </body>
</html>

CSS代码

:root {
  font-size: 20px;
}

*, ::after, ::before {
  appearance: none;
  box-sizing: border-box;
  font-family: "Figtree" !important;
  text-rendering: optimizeLegibility;
  user-select: none;
}

body {
  display: flex;
  flex-direction: column;
}

#title-bar {
  display: flex;
}

#title-bar-title {
  display: block;
  flex: 1 1;
  text-align: center;
}

.title-bar-button {
  flex: 0 0;
}

@font-face {
  font-display: block;
  font-family: "Figtree";
  src: url("/assets/Figtree[wght].woff2");
}

@font-face {
  font-display: block;
  font-family: "Figtree";
  font-style: italic;
  src: url("/assets/Figtree-Italic[wght].woff2");
}

当前问题表现 #

• 目标：让应用内所有元素都使用Figtree字体
• 实际情况：只有<h1>元素能正常显示该字体（字重700），其他文本元素均显示后备无衬线字体
• 移除CSS中的!important后，没有任何元素能加载Figtree字体，怀疑和用户代理样式表有关
• 通过开发者工具确认：样式表和字体文件已正确加载，“字体”标签下所有元素都标注使用Figtree，但视觉上只有h1生效

环境信息 #

• Tauri版本：1.5
• Figtree字体版本：2.0.3（WOFF2格式）
• 操作系统：Linux Mint 21.2

补充说明 #

标题栏div带有data-tauri-drag-region属性，使其表现得像原生标题栏，这可能是问题的关键因素。

应用截图 #

内容的提问来源于stack exchange，提问作者queerthoughts