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"样式就可以了。

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

相关推荐
梦梦代码精10 小时前
2026年PHP开源商城系统实测对比:架构、多商户、商用授权,谁才是真·省心?
vue.js·docker·架构·开源·代码规范
拉拉肥_King15 小时前
Vue 3 主题切换深度解析:从炫酷动画到零闪烁方案
前端·vue.js
杨梦馨16 小时前
万级数据表格卡死?Web Worker 一招搞定
前端·javascript·vue.js
哈撒Ki18 小时前
快速入门vue3与常见面试题
前端·vue.js·面试
云水一下19 小时前
Vue.js从零到精通系列(一):初识Vue——背景、环境与第一个应用
前端·javascript·vue.js
云水一下20 小时前
Vue.js从零到精通系列(二):响应式核心——ref、reactive、computed与watch
前端·javascript·vue.js
卤蛋fg621 小时前
vxe-table 列拖拽排序与行拖拽排序:让表格布局任意排序
vue.js
粉末的沉淀21 小时前
vue:Vite项目中高效管理纯色SVG图标的方案
前端·javascript·vue.js
卤蛋fg621 小时前
vxe-table 列宽与行高拖拽调整:让表格布局极其灵活,拖拽功能非常强大
vue.js
向日的葵0061 天前
Vue 路由传参的三种方式(三)
vue.js·路由