vue3 本地windows下的字体的引用

1、先上了张效果:

2、windows 字体的路径:c:/windows/fonts/

我们用华文行楷来测试下,先将华文行楷拷贝到/src/assets/fonts目录下。

3、然后我们来定义css:

复制代码
 @font-face {
    font-family: 'fyxk';
    font-style: normal;
    src: local('Opensans-Bold'), url(/@/assets/fonts/STXINGKA.TTF) format('truetype');
  }

  .font-fyxk {
    font-family: 'fyxk';
    font-size: 40px;
  }

用@font-face来自定义字体名称,及指定位置。这样我们自定义的 ".font-fyxk"样式就可以了。

测试通过,打包的时候是否存在问题,待测试。

相关推荐
卤蛋fg622 分钟前
vxe-table 如何实现分组列头折叠列功能
vue.js
小怪点点25 分钟前
vue3使用
前端·vue.js
学以智用2 小时前
Vue 3 核心函数全解(组合式 API + 常用工具函数)
javascript·vue.js
滕青山2 小时前
HTTP状态查询 在线工具核心JS实现
前端·javascript·vue.js
SuperEugene2 小时前
Vue3 中后台实战:VXE-Table 从基础表格到复杂业务表格全攻略 | Vue生态精选篇
前端·javascript·vue.js
SuperEugene2 小时前
Vue3 中后台实战:Element + VXE Table 搜索表格分页完整方案 | Vue生态精选篇
前端·javascript·vue.js
wuhen_n3 小时前
computed 的缓存哲学:如何避免不必要的重复计算?
前端·javascript·vue.js
wuhen_n3 小时前
watch 与 watchEffect:精准监听,避免副作用滥用
前端·javascript·vue.js
远山枫谷19 小时前
uniapp + Vue 自定义组件封装:自定义样式从入门到实战
前端·vue.js
Kakarotto21 小时前
Canvas 直线点击事件处理优化
javascript·vue.js·canvas