如何做微信朋友圈网站,网站数据库丢失,做公司网站时的英文简介,织梦网站图片代码要使用FontFaceObserver来加载设置项目本地的字体#xff0c;先确保字体文件位于项目中或者可以从服务端获取到#xff0c;这样就可以使用FontFaceObserver来检测并加载这些字体 主要有以下几步#xff1a;
npm或者yarn安装引入fontfaceobserver字体资源引入和font-face配置…要使用FontFaceObserver来加载设置项目本地的字体先确保字体文件位于项目中或者可以从服务端获取到这样就可以使用FontFaceObserver来检测并加载这些字体 主要有以下几步
npm或者yarn安装引入fontfaceobserver字体资源引入和font-face配置使用FontFaceObserver加载字体并设置fontFamily
下面写个伪代码的示例 首先引入字体资源css配置字体
font.css
font-face {font-family: 苹方 Medium;src: url(./cn/苹方 Medium.otf);
}
font-face {font-family: 新宋体;src: url(./cn/新宋体.ttc);
}这个style样式可以写在需要设置字体的组件中当然也可以分开以文件的方式引入我建议分开更好更符合模块化
font.js
/** Description: 字体文件列表*/const cnList [{name: 苹方 Medium,fontFamily: 苹方 Medium,},{name: 新宋体,fontFamily: 新宋体,},
];export default [...cnList];如果用请求实现字体列表的方式实现的话这个可以写在需要设置字体的组件中当然也可以分开以文件的方式引入这种本地字体更好我建议分开更好更符合模块化
如过需要从服务端或者其他服务引用文件字体列表 目标文件.vue
!-- 字体 --
div classleft font-selectorSelect v-modelfontAttr.fontFamily on-changechangeFontFamilyOption v-foritem in fontFamilyList :valueitem.name :keyfont-${item.name}div classfont-item v-if!item.preview{{ item.name }}/divdiv classfont-item v-else :stylebackground-image:url(${item.preview});{{ !item.preview ? item : }}!-- 解决无法选中问题 --span styledisplay: none{{ item.name }}/span/div/Option/Select
/div//将上面编写的字体列表js文件引入
import fontList from /assets/fonts/font;
const fontFamilyList ref([...fontList]);//字体请求
const getFontList async () {const res await axios.get(xxx/font.json);console.log(font response, res);fontFamilyList.value [...fontFamilyList.value,...Object.entries(res.data).map(([, value]) value),];
};// 修改字体
const changeFontFamily (fontName) {console.log(changeFontFamily fontName, fontName);if (!fontName) return;// 字体加载并设置const loadingInstance ElLoading.service(options)const font new FontFaceObserver(fontName);console.log(font, font);font.load(null, 15000).then(() {console.log(字体加载成功);document.documentElement.classList.add(fonts-loaded)document.body.classList.add(font-loaded);loadingInstance.close()}).catch((err) {console.log(err);loadingInstance.close()});
};style scoped langless
import url(/assets/fonts/font.css);
/style最简单的用法如下
script
const font new FontFaceObserver(自定义字体名)
font.load().then().catch()
/scriptstylefont-face {font-family: 自定义字体名;src: url(字体包路径);}
/style这样一个前端字体动态设置的功能就实现了。
