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

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

相关推荐
前端小巷子9 分钟前
Vue 3全面提速剖析
前端·vue.js·面试
尖椒土豆sss21 分钟前
踩坑vue项目中使用 iframe 嵌套子系统无法登录,不报错问题!
前端·vue.js
画月的亮29 分钟前
前端处理导出PDF。Vue导出pdf
前端·vue.js·pdf
知识分享小能手6 小时前
Vue3 学习教程,从入门到精通,Axios 在 Vue 3 中的使用指南(37)
前端·javascript·vue.js·学习·typescript·vue·vue3
伍哥的传说7 小时前
Mitt 事件发射器完全指南:200字节的轻量级解决方案
vue.js·react.js·vue3·mitt·组件通信·事件管理·事件发射器
一枚小小程序员哈10 小时前
基于Vue + Node能源采购系统的设计与实现/基于express的能源管理系统#node.js
vue.js·node.js·express
一枚小小程序员哈14 小时前
基于Vue的个人博客网站的设计与实现/基于node.js的博客系统的设计与实现#express框架、vscode
vue.js·node.js·express
定栓14 小时前
vue3入门-v-model、ref和reactive讲解
前端·javascript·vue.js
LIUENG15 小时前
Vue3 响应式原理
前端·vue.js
wycode16 小时前
Vue2实践(3)之用component做一个动态表单(二)
前端·javascript·vue.js