Typescript中的' CSS Font提单API '问题

Question

在我的angular库中，我试图使用字体加载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;
}
}

在我的索引。

/*
* 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操场)

顺便说一下，由于document.fonts.ready是一个承诺，您不能直接使用:

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

否则，由于promise是true，您最终将总是在if语句中运行代码，我认为这不是您的意图。