个人网站备案名字重要吗,购物网站主页模板,网址大全123手机版下载,大连建设网站制作首先加载字体这个需求基本只存在于非系统字体#xff0c;系统已有字体不需要加载即可直接使用#xff1b; 方案1#xff1a;创建 style 标签#xff0c;写入 font-face{font-family: xxx;src: url(xxx)} 等相关字体样式#xff1b;将style标签添加到body里#xff1b;方… 首先加载字体这个需求基本只存在于非系统字体系统已有字体不需要加载即可直接使用 方案1创建 style 标签写入 font-face{font-family: xxx;src: url(xxx)} 等相关字体样式将style标签添加到body里方案2通过 new FontFace() 进行字体加载然后通过相关API进行检测加载情况 方案1的适用场景适合一次性加载所需字体自己对应功能读取字体结构信息不依赖浏览器的真实加载情况对加载字体的延迟情况无要求
方案2的适用场景适合完全加载好字体再执行某功能避免字体还原显示异常例如我项目所用的fabric库的相关字体功能适合按需加载字体能完全掌握字体加载流程提高代码可读性、功能可控性 代码示例仅以本人electronvitevue3的项目应用为例就算是在web用也简单改下就完事了核心一点没变 并且案例仅以本地静态字体资源为例不做过多的其他场景的案例代码分析省点字如果是http请求拿到的字体资源碰到数据格式与例子不一致的情况下自行了解如何转为所需的格式 方案1通过style标签加载字体 import { basename, extname } from path-browserify;const localFonts import.meta.glob(/public/fonts/*.*);function getFontName(fontPath: string) {return basename(fontPath.replace(/\\/g, /)).slice(0, -extname(fontPath).length);
}
function loadLocalFonts() {// 处理软件自带的字体资源const fontStyle document.createElement(style);let fontFace ;Object.keys(localFonts).forEach((font) {// 打包后路径不需要/public,所以要去掉font font.replace(/public, );const fontName fontStore.getFontName(font);fontFace font-face{font-family: ${fontName};src: url(${font})}\n;});fontStyle.innerText fontFace;document.body.appendChild(fontStyle);
} 方案2通过 new FontFace() 进行字体加载 import { readFileSync, readdirSync } from fs;
import { isArrayBuffer } from lodash-es;function isFontFile(filename: string) {const fontExtensions /\.(ttf|otf|woff|woff2|eot)$/i;return fontExtensions.test(filename);
}async getDownloadFont() {// 获取保存字体的路径此案例是非自己项目内自带的字体按需自己改该行代码即可const filePath await ipcRenderer.invoke(GET_FONT_PATH);const files readdirSync(filePath);const fontList: any[] [];files.forEach((val) {if (isFontFile(val)) {const data readFileSync(join(filePath, val).replace(/\\/g, /));const arrayBuffer new Uint8Array(data).buffer;if (isArrayBuffer(arrayBuffer)) {fontList.push({path: join(filePath, val).replace(/\\/g, /),name: val,buffer: arrayBuffer,});}}});return fontList;} import { basename, extname } from path-browserify;function getFontName(fontPath: string) {return basename(fontPath.replace(/\\/g, /)).slice(0, -extname(fontPath).length);
}
function setDownloadedFontList() {window.electron?.Font?.getDownloadFont().then((res: any[]) {res.forEach((val) {const fontName getFontName(val.name);const font new FontFace(fontName, val.buffer);(document as any).fonts.add(font);font.loaded.then(() {if (document.fonts.check(12px ${fontName})) {// 加载完成}});});});
}
