一、字体事件基础：什么是字体事件、分类与重要性

大家好，我是这门课的主讲人。做了十几年前端，我越来越觉得字体这事儿，看着简单，实际上坑特别多。今天咱们就从最基础的概念聊起——字体事件。

说白了，字体事件就是浏览器在加载、渲染、与用户交互字体时，触发的一系列可监听的动作。你想想看，一个字体从服务器下载到屏幕上显示出来，中间经历了多少环节？每个环节都可能出问题。字体事件就是帮我们抓住这些环节的“钩子”。

核心定义：字体事件是浏览器在字体资源生命周期中触发的可编程信号，开发者可以通过监听这些信号来控制字体加载行为、优化渲染体验、增强交互反馈。

1.1 字体事件的三大分类

我个人习惯把字体事件分成三类：加载事件、渲染事件、交互事件。这三类覆盖了字体从“出生”到“被用户看到”再到“被用户操作”的全过程。

分类	触发时机	典型事件	应用场景
加载事件	字体文件请求、下载、解析阶段	`loading`、`loaded`、`error`	字体预加载、降级策略、加载进度反馈
渲染事件	字体应用到页面、文本重绘阶段	`fontchange`、`textrendered`	布局偏移控制、字体切换动画、性能监控
交互事件	用户与字体文本交互阶段	`hover`、`click`、`selection`	动态字体样式、可编辑文本、字体选择器

加载事件

加载事件是最基础、也是最容易出问题的一类。我记得刚入行那会儿，做一个品牌官网，用了三种自定义字体。结果页面加载时，文字先是空白，然后突然“闪”出来——这就是经典的FOUT（Flash of Unstyled Text）。

为什么会这样？因为浏览器在字体文件下载完成之前，不知道该怎么渲染那些文字。加载事件就是用来解决这类问题的。

// 使用 CSS Font Loading API 监听加载事件
const font = new FontFace('MyFont', 'url(/fonts/myfont.woff2)');

font.load().then(() => {
  console.log('字体加载完成');
  document.fonts.add(font);
}).catch((err) => {
  console.error('字体加载失败', err);
  // 触发降级字体
});

// 监听全局字体加载状态
document.fonts.ready.then(() => {
  console.log('所有字体加载完毕');
  // 可以安全地显示页面了
});

我的经验：在实际项目中，我建议同时监听 loading 和 error 两个事件。前者用来控制加载状态UI，后者用来触发降级方案。我曾经因为只监听了 load 事件，结果字体文件404了，页面空白了整整3秒——用户体验直接崩了。

渲染事件

渲染事件关注的是字体“画”到屏幕上的那一刻。这里有个关键问题：字体替换会导致布局偏移。

你想想看，fallback字体和自定义字体的度量（metrics）往往不一样。一旦自定义字体加载完成并替换上去，文本的宽度、高度都可能变化，进而影响整个布局。这就是CLS（Cumulative Layout Shift）的一个重要来源。

// 监听字体替换事件（通过 PerformanceObserver）
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.entryType === 'layout-shift') {
      console.log('布局偏移量:', entry.value);
      if (entry.value > 0.1) {
        // 字体替换导致的布局偏移过大，需要优化
      }
    }
  }
});
observer.observe({ type: 'layout-shift', buffered: true });

注意：渲染事件在浏览器原生API中支持度还不够统一。目前 fontchange 事件主要依赖 document.fonts 对象的 loading/ready 状态变化来间接监听。真正的渲染完成事件，往往需要结合 requestAnimationFrame 或 IntersectionObserver 来模拟。

交互事件

交互事件是字体事件里最“前端”的部分。用户鼠标悬停、点击、选中文本时，字体样式可以动态变化。这不仅仅是 :hover 伪类那么简单——真正的字体交互事件，能让我们在用户操作时动态切换字体文件。

// 动态切换字体以响应交互
const heading = document.querySelector('h1');

heading.addEventListener('mouseenter', () => {
  // 切换到粗体版本
  document.fonts.load('700 1em "MyFont"').then(() => {
    heading.style.fontWeight = '700';
  });
});

heading.addEventListener('mouseleave', () => {
  heading.style.fontWeight = '400';
});

1.2 字体事件在Web开发中的重要性

说实话，很多开发者觉得字体事件是个“锦上添花”的东西。但我不这么看。在我参与过的几个大型项目中，字体事件直接决定了用户体验的成败。

我总结了一下，字体事件的重要性体现在三个方面：

性能优化：通过监听加载事件，可以实现字体预加载、按需加载、降级策略，避免FOUT/FOIT，减少CLS。
用户体验：渲染事件让我们能在字体就绪后平滑过渡，而不是生硬地“闪”一下。交互事件则让字体“活”起来，提升页面质感。
可访问性：字体加载失败时，通过事件触发降级方案，确保内容始终可读。这一点对依赖屏幕阅读器的用户尤其重要。

一句话总结：没有字体事件，你就是在“盲人摸象”——你不知道字体什么时候加载完、渲染好、用户怎么跟它互动。有了字体事件，你才能精确控制每一个环节，给用户丝滑的体验。

1.3 字体事件的知识体系

下面这张图是我梳理的字体事件知识体系。你可以把它当作整门课的“地图”。

1.4 一个真实案例

最后，我分享一个真实案例。去年我做了一个内容平台，首页有大量文章标题使用了自定义字体。上线后发现，每次刷新页面，标题区域都会“跳”一下——字体加载完成后，布局变了。

我当时用 Performance Observer 抓了一下 CLS 数据，发现最大值达到了 0.25。这个数值在 Google 的 Core Web Vitals 标准里属于“需要改进”的范围。

解决方案是什么？其实就是利用字体加载事件，在字体就绪之前，先用 fallback 字体占位，并且通过 size-adjust 属性让 fallback 字体的度量尽量接近自定义字体。等加载事件触发后，再平滑切换。

/* 利用 size-adjust 减少布局偏移 */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  size-adjust: 90%;
}

/* 加载完成前使用 fallback */
body {
  font-family: 'MyFont', 'Noto Sans SC', sans-serif;
}

/* 加载完成后触发过渡 */
body.fonts-loaded {
  font-family: 'MyFont', sans-serif;
}

避坑指南：我曾经犯过一个错误——在字体加载事件里直接修改 font-family，导致整个页面重绘，反而加剧了布局抖动。正确的做法是：提前在 CSS 里声明好字体栈，用 font-display: swap 控制行为，JS 只负责在加载完成后添加一个类名，触发平滑过渡。

嗯，以上就是字体事件的基础内容。记住这三个分类：加载、渲染、交互。后面的章节，我们会逐一深入每个分类，从 API 用法到实战技巧，把字体事件这块彻底吃透。

📚 课程目录

一、字体事件基础：什么是字体事件、分类与重要性

1.1 字体事件的三大分类

加载事件

渲染事件

交互事件

1.2 字体事件在Web开发中的重要性

1.3 字体事件的知识体系

1.4 一个真实案例