配了多年字体回退，每次加载完都抖一下——今天 CSS 把这件事用一行属性彻底原生化了

配过自定义字体的前端工程师都踩过这个坑：页面上写了 @font-face，回退字体和正式字体 사이 尺寸差了一截，文字突然跳一下。这种「字体抖动」（FOUT，Flash of Unstyled Text）以前只能靠手写匹配字体 metric 或者 JS 监听字体加载事件。今天 Safari Technology Preview 158 把 font-size-adjust 的 from-font 关键字做了进来，CSS 终于能自己处理这件事了。

以前怎么解的

font-size-adjust 这个属性其实 2023 年就进了 Baseline（Chrome/Firefox/Safari 17 全支持），但用起来麻烦：你要自己量一个参考字体的 aspect value，再算出来回退字体该用多大字号。

/* 旧方法：手动量 aspect value，0.5 是估算 */
font-size: 16px;
font-size-adjust: 0.5; /* 这个数字从哪来的？查 font metrics */

这个 0.5 从 Font Metrics 里量出来，不同字体不一样——换成另一个回退字体又要重新算。用 JS 的方案更重：

// 监听字体加载，再用 ResizeObserver 同步
document.fonts.ready.then(() => {
  const fontSize = window.getComputedStyle(el).fontSize;
  // 手动对齐...
});

今天 from-font 把这件事自动化了

Safari Technology Preview 158 支持了 font-size-adjust: from-font，顾名思义：让浏览器自动从第一个可用字体里取 aspect value，不用你手填数字。

body {
  font-family: "Custom Font", "System Fallback", sans-serif;
  font-size-adjust: from-font; /* 浏览器自动算 */
}

规则很简单：

• 如果所有字体都加载好了，from-font 等于没写，用第一个声明字体的 metrics
• 如果第一个声明的字体还没加载完成，浏览器用实际渲染的回退字体的 aspect value 来调整字号
• 一旦自定义字体加载完成，字号自动对齐，不用刷新页面

/* 完整降级方案 */
@font-face {
  font-family: 'BrandFont';
  src: url('/fonts/brand.woff2') format('woff2');
  font-display: swap;
}

body {
  font-family: 'BrandFont', system-ui, sans-serif;
  font-size-adjust: from-font; /* 现代浏览器用，Fallback 自动对齐 */
  /* 不支持的浏览器用固定值兜底（按本项目实测字体填） */
  font-size-adjust: 0.52;
}

浏览器支持

Safari 技术预览 158 是首个将 from-font 引入 WebKit 的版本，稳定版支持时间待跟踪。

怎么验证效果

打开 Safari Technology Preview 158（或 Chrome 126+），在开发者工具里切到 “Elements” 面板，选一个用了自定义字体的文本节点，看它的 computed font-size 值：

1. 网络断开，回退字体渲染时字号会自动调整
2. 网络恢复，字体加载完成后，字号不跳

// 用 Performance Observer 确认字体加载时机
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.entryType === 'resource' && entry.name.endsWith('.woff2')) {
      console.log('Custom font loaded:', entry.name);
    }
  });
});
observer.observe({ entryTypes: ['resource'] });

三步接入

1. CSS 声明：把 font-size-adjust: from-font 写到字体栈里，一行搞定
2. 降级兜底：未支持浏览器加一个固定值 font-size-adjust: <your-value>，渐进增强
3. 字体加载策略：配合 font-display: swap，回退阶段字号自动对齐，用户体验更顺滑

from-font 这个关键字的意义不只是少写一个数字——它让字体回退的体验第一次不需要 JavaScript 介入，CSS 自己把这件事闭环了。关注 Safari 稳定版什么时候跟进，支持率过 90% 后就可以作为默认方案上了。