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

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

相关推荐
daols8815 小时前
vue甘特图vxe-gantt如何实现拖拽任务条时如有已关联依赖线,同时更新依赖任务的日期的方式
javascript·vue.js·甘特图
invicinble18 小时前
前端框架使用vue-cli (第五层:构建打包层--总体层介绍)
前端·vue.js·前端框架
前端那点事18 小时前
Vuex刷新数据丢失?4种持久化方案全覆盖,从零到项目落地(实战完整版)
前端·vue.js
前端那点事18 小时前
彻底吃透JS定时器!setTimeout/setInterval区别、坑点与最优优化方案(Vue实战)
前端·vue.js
Ruihong18 小时前
🔥Vue 转 React 实战:VuReact 实时监听开发指南
vue.js·后端·react.js
费曼学习法18 小时前
Vue 3 编译优化揭秘:静态提升与 PatchFlags 的极致性能
javascript·vue.js
xuankuxiaoyao19 小时前
vue.js 课程自己编写小游戏
前端·javascript·vue.js
invicinble19 小时前
前端框架使用vue-cli (第五层:构建打包层--babel.config.js介绍)
前端·vue.js·前端框架
前端若水19 小时前
安装 markdown-it 后项目报错,可能是 Vue/Webpack 项目中 Quill 的问题(ES6+ 语法不支持)
vue.js·webpack·es6