之前做类似易企秀的项目需要动态引入字体，上代码
### 按需加载方式
initFont() {
let fontList = [
{
fontUrl: "**.ttf",
fontFamily: "myFirstFont",
label: "草体"
}
];
let code = fontList.reduce((accumulator, currentValue) => {
return accumulator + `@font-face { font-family: ${currentValue.fontFamily};src: url('${currentValue.fontUrl}'); }`;
}, "");
var style = document.createElement("style");
style.type = "text/css";
style.rel = "stylesheet";
style.appendChild(document.createTextNode(code));
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
console.warn("字体库加载完成！", code);
}
全部加载方式
initFont() {
let fontList = [
{
fontUrl: "**.ttf",
fontFamily: "myFirstFont",
label: "草体"
}
];
for (let i in fontList ) {
loadFonts(records[i].fontFamily, records[i].fontUrl);
}
async function loadFonts(fontFamily, fontUrl) {
const font = new FontFace(fontFamily, `url(${fontUrl})`);
await font.load();
document.fonts.add(font);
}
}
参数说明
- fontList为字体资源列表，然后在需要使用的地方动态设置fontFamily就行了
- fontUrl 为ttf字体资源链接
