仅用可变字体时出现FOUT布局偏移，求技术解惑

这不是可变字体的已知问题，核心矛盾出在你当前重复引用可变字体文件的方式上，改用单个包含字重范围的@font-face声明就能解决FOUT问题。

为什么多声明引用同一个可变字体文件会触发FOUT？ #

• 浏览器会将每个@font-face声明视为独立的字体资源，即便指向同一个文件，初始加载时也会触发多次资源请求与解析流程，大幅延迟字体的渲染时机，导致文本闪烁直到所有声明对应的资源都加载完成。
• 静态字体的每个@font-face对应不同文件，浏览器能清晰识别各字重的资源边界，配合主题默认的字体加载优化策略，所以没有出现FOUT。

正确的可变字体使用方式 #

用单个@font-face声明覆盖所需的字重范围，示例代码如下：

@font-face {
  font-family: '你的可变字体名称';
  src: url('你的可变字体文件路径.woff2') format('woff2-variations');
  font-weight: 300 700; /* 覆盖你需要的所有字重区间 */
  font-style: normal;
}

主题限制的应对方法 #

如果主题自定义界面不支持直接添加带字重范围的声明，可通过以下方式注入：

• 主题后台的「自定义CSS」功能，直接粘贴上述代码。
• 创建子主题，在子主题的style.css文件中添加该声明。
• 使用代码片段插件，将这段CSS注入到页面<head>区域。

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