-
-
Notifications
You must be signed in to change notification settings - Fork 4.7k
/
loadWebFont.ts
116 lines (94 loc) · 3.23 KB
/
loadWebFont.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import { extensions, ExtensionType, settings, utils } from '@pixi/core';
import { checkDataUrl } from '../../utils/checkDataUrl';
import { checkExtension } from '../../utils/checkExtension';
import { LoaderParserPriority } from './LoaderParser';
import type { LoadAsset } from '../types';
import type { LoaderParser } from './LoaderParser';
const validWeights = [
'normal', 'bold',
'100', '200', '300', '400', '500', '600', '700', '800', '900',
];
const validFontExtensions = ['.ttf', '.otf', '.woff', '.woff2'];
const validFontMIMEs = [
'font/ttf',
'font/otf',
'font/woff',
'font/woff2',
];
export type LoadFontData = {
family: string;
display: string;
featureSettings: string;
stretch: string;
style: string;
unicodeRange: string;
variant: string;
weights: string[];
};
/**
* Return font face name from a file name
* Ex.: 'fonts/tital-one.woff' turns into 'Titan One'
* @param url - File url
*/
export function getFontFamilyName(url: string): string
{
const ext = utils.path.extname(url);
const name = utils.path.basename(url, ext);
// Replace dashes by white spaces
const nameWithSpaces = name.replace(/(-|_)/g, ' ');
// Upper case first character of each word
const nameTitleCase = nameWithSpaces.toLowerCase()
.split(' ')
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
.join(' ');
return nameTitleCase;
}
/** Web font loader plugin */
export const loadWebFont = {
extension: {
type: ExtensionType.LoadParser,
priority: LoaderParserPriority.Low,
},
test(url: string): boolean
{
return checkDataUrl(url, validFontMIMEs) || checkExtension(url, validFontExtensions);
},
async load(url: string, options?: LoadAsset<LoadFontData>): Promise<FontFace | FontFace[]>
{
// Prevent loading font if navigator is not online
if (!globalThis.navigator.onLine)
{
throw new Error('[loadWebFont] Cannot load font - navigator is offline');
}
const fonts = settings.ADAPTER.getFontFaceSet();
if (fonts)
{
const fontFaces: FontFace[] = [];
const name = options.data?.family ?? getFontFamilyName(url);
const weights = options.data?.weights?.filter((weight) => validWeights.includes(weight)) ?? ['normal'];
const data = options.data ?? {};
for (let i = 0; i < weights.length; i++)
{
const weight = weights[i];
const font = new FontFace(name, `url(${encodeURI(url)})`, {
...data,
weight,
});
await font.load();
fonts.add(font);
fontFaces.push(font);
}
return fontFaces.length === 1 ? fontFaces[0] : fontFaces;
}
// #if _DEBUG
console.warn('[loadWebFont] FontFace API is not supported. Skipping loading font');
// #endif
return null;
},
unload(font: FontFace | FontFace[]): void
{
(Array.isArray(font) ? font : [font])
.forEach((t) => settings.ADAPTER.getFontFaceSet().delete(t));
}
} as LoaderParser<FontFace | FontFace[]>;
extensions.add(loadWebFont);