@font-face规则和Font Loading API

@font-face 是 CSS 的一个特性，允许网页开发者指定并加载自定义字体，使得即使访问者的计算机上没有预装这些字体，也能在网页上正确显示。这意味着设计师可以不受限于用户系统自带的字体，极大地丰富了网页设计的排版选择。@font-face 的基本语法如下：

@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
复制

在这个例子中，font-family 定义了自定义字体的名称，src 属性指定了字体文件的 URL 及其格式，而 font-weight 和 font-style 定义了字体的样式属性。

Font Loading API 是更现代的 Web API，它为 Web 字体的加载提供了更细粒度的控制。这一 API 允许开发者异步加载字体，并且可以监听字体加载的状态（加载中、加载成功或加载失败），从而实现更为精细的用户体验优化，比如在字体加载完成前先用系统字体渲染文本，一旦字体加载完毕立即切换到自定义字体，避免了因等待字体加载而导致的页面空白或闪烁现象。

使用 Font Loading API 的一个基本示例如下：

let fontFaceSet = document.fonts;

let myFont = new FontFace('MyWebFont', 'url(myfont.woff2)');
fontFaceSet.load(myFont).then(function(loadedFace) {
  // 字体加载成功，可以在这里应用字体
  document.documentElement.style.fontFamily = 'MyWebFont, sans-serif';
}).catch(function(error) {
  // 处理字体加载失败的情况
  console.error('Font loading failed:', error);
});
复制

通过结合 @font-face 规则预先声明字体，以及利用 Font Loading API 来异步管理加载过程，开发者可以实现更加高效和用户友好的字体加载体验。