JavaScript中FontFace对象的使用方式

当网页在加载特殊字体时，如果该字体还没有在用户的计算机上，那么浏览器将会按顺序寻找其他字体进行替代，导致最终呈现效果可能和设计时有很大差别。而 FontFace 对象正是 JavaScript 中用来加载自定义字体文件，并在用户计算机上注册该字体的工具之一。

使用 FontFace

• FontFace 的语法如下：

const font = new FontFace('font-family-name', 'URL-to-the-font-file', options);

• font-family-name: 类似于 CSS 字体规则中的 font-family，用于指定该字体的名称，后面的 CSS 中可以通过该名称来指定使用该字体。
• URL-to-the-font-file: 指定字体文件的 URL 路径，可以是相对路径或绝对路径。

• options: 一个可选的字体选项对象，可以包含多种自定义属性，如字体的格式、字体文件的描述信息等。

• 使用 fetch() 函数来加载字体文件并解析成 ArrayBuffer，然后通过 FontFace() 函数实例化 FontFace 对象：

async function loadFont() {
  const result = await fetch('font.ttf');
  const fontBuffer = await result.arrayBuffer();
  const font = new FontFace('Open Sans', fontBuffer);
  document.fonts.add(font);
  document.body.style.fontFamily = 'Open Sans';
}

loadFont();

• 将 FontFace 对象添加到 document.fonts 中，这样可以确保在字体成功加载并且被用户浏览到前，该字体不会应用到任何文本上。在将字体添加到 font-style 上后，可以在 CSS 文件的字体样式中使用它。此处 document.body.style.fontFamily 用于验证字体是否已成功加载。

FontFace 示例

下面是两个示例说明 FontFace 的使用方式：

示例1：加载单一字重的普通字体

(async () => {
  const font = new FontFace('Roboto', 'url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc9.ttf)');
  await font.load();
  document.fonts.add(font);

  const header = document.querySelector('h1');
  header.style.fontFamily = 'Roboto, sans-serif';
})();

• 在这个示例中，我们使用 FontFace 对象来加载一个 Google 字体库中的单一字重 Roboto-Regular。
• 使用 load() 方法等待字体加载完成，然后使用 add() 方法将字体添加至 document.fonts 集合。
• 最后，在 CSS 中使用刚加载的字体。

示例2：加载多个字体文件的变体字体

(async () => {
  // 此示例中我们加载了 Google Fonts 中的 Lato 字体所有的变体，含有 400、400i、700、700i 以及 900 变体  
  const fontWeights = {
    'Lato_Regular': 'https://fonts.gstatic.com/s/lato/v17/S6u8w4BMUTPHh6UVSwiPHA3q5d0.ttf',
    'Lato_Italic': 'https://fonts.gstatic.com/s/lato/v17/S6u_w4BMUTPHjxsIPxA.ttf',
    'Lato_Bold': 'https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjxAwXiWtFCfQ7A.ttf',
    'Lato_BoldItalic': 'https://fonts.gstatic.com/s/lato/v17/S6u_w4BMUTPHjxsI9w2_FQ.ttf',
    'Lato_Black': 'https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh7USew-FGCWc.ttf'
  };

  const fonts = [];

  // 创建 FontFace 对象并将其添加到字体文件数组中。
  Object.keys(fontWeights).forEach((key) => {
    const fontFile = fontWeights[key];
    const font = new FontFace(key, `url(${fontFile})`);
    fonts.push(font);
  });

  // 依次加载并等待加载完成后添加到文本样式中。
  for (const font of fonts) {
    await font.load();
    document.fonts.add(font);
  }

  const header = document.querySelector('h1');
  header.style.fontFamily = 'Lato_Regular';
  header.style.fontWeight = 'bold';
  header.style.fontSize = '2rem';

  const subHeader = document.querySelector('p');
  subHeader.style.fontFamily = 'Lato_Italic';
})();

在这个示例中，我们加载了 Google 字体库中的 Lato 字体的全部变体字体。在字体文件对象中，不同字体权重的字体文件 URL 路径被分配一个属性名 key ，然后一起被添加到字体数组 fonts 中。然后使用 for...of 循环等待每个字体都加载完成之后，再通过设置 CSS 样式应用并显示字体。

总体而言，使用 FontFace 对象使我们可以加载自定义字体并使用它们来呈现文本，从而使网页设计变得更加独特和美观。