当前位置：首页 > news >正文

前端使用fontfaceobserver库实现字体设置

news 2025/7/27 22:47:42

要使用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 class="left font-selector"><Select v-model="fontAttr.fontFamily" @on-change="changeFontFamily"><Option v-for="item in fontFamilyList" :value="item.name" :key="`font-${item.name}`"><div class="font-item" v-if="!item.preview">{{ item.name }}</div><div class="font-item" v-else :style="`background-image:url('${item.preview}');`">{{ !item.preview ? item : '' }}<!-- 解决无法选中问题 --><span style="display: 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 lang="less">
@import url('@/assets/fonts/font.css');
</style>

最简单的用法如下：

<script>
const font = new FontFaceObserver('自定义字体名')
font.load().then().catch()
</script><style>@font-face {font-family: 自定义字体名;src: url('字体包路径');}
</style>