Angular中调用FontFaceSet.add()遇TypeScript错误，求解决方案

下面是几个可行的解决方案：

• 类型断言绕过检查
  直接通过类型断言告诉TypeScriptdocument.fonts包含add方法，这是最直接的临时解决办法：

  // 简单断言为any
  (document.fonts as any).add(font);
  
  // 更严谨的自定义类型断言
  interface FontFaceSetWithAdd extends FontFaceSet {
    add(font: FontFace): void;
  }
  (document.fonts as FontFaceSetWithAdd).add(font);
  

• 检查并完善tsconfig.json的lib配置
  确保你的tsconfig.json中compilerOptions.lib包含了完整的DOM相关库，FontFace相关的类型定义依赖这些库：

  {
    "compilerOptions": {
      "lib": ["ES2020", "dom", "dom.iterable"]
    }
  }
  

  修改后重启TypeScript服务或重新构建项目，让配置生效。

• 使用FontFace.load()替代add方法
  调用FontFace实例的load()方法，加载完成后字体会自动加入文档的字体集合，效果和add一致：

  const font = new FontFace("myfont", "url(myfont.woff)", {
    style: "italic",
    weight: "400",
    stretch: "condensed",
  });
  
  font.load().then(() => {
    // 字体已加载完成，可在后续代码中使用
  });
  

内容的提问来源于stack exchange，提问作者Raphaël Balet