前段时间用到了自定义字体,没怎么在意,直接在assets 静态资源文件夹中放ttf 字体文件,使用的时候@font-face 加载即可:
@font-face {
font-family: '思源黑体';
src: url('思源黑体.ttf'); // 字体文件与该css文件放在同级文件夹内
}
昨天又用到了自定义字体,但需要是加载用户自己上传的字体,那么放在项目资源文件夹中就不能满足需求了。
解决方法也是使用@font-face url 加载,稍微改动一下,在加载首页面的时候就把用户用到的字体全部加载出来,后续用户就可以自由使用自己的字体了。
// 加载字体 初始化的时候调用此方法
async addFontface () {
let rule = '';
// 调用接口
const res = await getFontList({ userId: this.userId });
if (res.success) {
res.data.forEach(item => {
rule += '@font-face {font-family:"' + item.fontName + '";src:url("' + item.fontUrl + '");}'
});
// 创建style 标签 写入字体信息
const sty = document.createElement('style');
sty.type = 'text/css';
sty.innerHTML = rule;
document.getElementsByTagName('head')[0].appendChild(sty);
}
}
// 使用字体
.class {
font-family:'思源黑体';
}