`CSS 字体加载 API` Typescript 问题

Question

在我的 angular 库中，我尝试使用 Font loading Api 为此我创建了一个 declaration 文件，如下所示：( index.d.ts)

// Spec: https://www.w3.org/TR/css-font-loading/

type CSSOMString = string;
type FontFaceLoadStatus = 'unloaded' | 'loading' | 'loaded' | 'error';
type FontFaceSetStatus = 'loading' | 'loaded';

interface FontFace {
  family: CSSOMString;
  style: CSSOMString;
  weight: CSSOMString;
  stretch: CSSOMString;
  unicodeRange: CSSOMString;
  variant: CSSOMString;
  featureSettings: CSSOMString;
  variationSettings: CSSOMString;
  display: CSSOMString;
  readonly status: FontFaceLoadStatus;
  readonly loaded: Promise<FontFace>;
  load(): Promise<FontFace>;
}

interface FontFaceSet {
  readonly status: FontFaceSetStatus;
  readonly ready: Promise<FontFaceSet>;
  check(font: string, text?: string): Boolean;
  load(font: string, text?: string): Promise<FontFace[]>;
}

declare global {
  interface Document {
    fonts: FontFaceSet;
  }
}

在我的 index.ts 文件中，我导入并开始使用 api:

/*
 * Public API Surface of ibo-shared-lib
 */
/// <reference path = "./index.d.ts"

if ((document as any).fonts.ready) {
  const myriadfonts = new FontFace('MyriadPro-Regular', 'url(./src/assets/fonts/MyriadPro-Regular.ttf)');

  document.fonts.add(myriadfonts);
}

export * from './src/lib/component/index';
export * from './src/lib/directives/index';
export * from './src/lib/pipes/index';
export * from './src/lib/services/index';

export * from './src/lib/ibo-wrapper/ibo-wrapper.module';
export * from './src/lib/ibo-shared-lib.module';

但是我还是报错如下：

error TS2304: Cannot find name 'FontFace'. error TS2339: Property 'fonts' does not exist on type 'Document'.

那么正确的处理方法是什么？

Answer 1

截至今天 (v4.3)，TypeScript 没有 CSS 字体加载的类型定义。（编辑：这应该会在下一个版本 v4.4 中改变）

幸运的是，这些定义在 DefinitelyTyped 上可用。您可以使用 npm 在您的项目中安装它们，例如：

npm install --save @types/css-font-loading-module

安装这些类型后，您可以删除 index.d.ts 文件，然后像这样导入类型：

import 'css-font-loading-module'

document.fonts.ready.then(function() {
  const myriadfonts = new FontFace('MyriadPro-Regular', 'url(./src/assets/fonts/MyriadPro-Regular.ttf)')

  document.fonts.add(myriadfonts)
})

(TS playground)

顺便说一句，因为 document.fonts.ready 是一个承诺，你不能简单地使用这个：

if (document.fonts.ready) {
  ...
}

否则，由于 promise 是 truthy，您将始终以运行 if 语句中的代码结束，这不是您的意图我假设。

`CSS 字体加载 API` Typescript 问题

`CSS Font Lading API` issues with Typescript

typescript

typescript-typings

angular