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

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

相关推荐
计算机程序设计小李同学29 分钟前
个人数据管理系统
java·vue.js·spring boot·后端·web安全
JosieBook1 小时前
【Vue】09 Vue技术——JavaScript 数据代理的实现与应用
前端·javascript·vue.js
Eason_Lou2 小时前
webstorm开发vue项目快捷跳转到vue文件
ide·vue.js·webstorm
起名时在学Aiifox2 小时前
前端文件下载功能深度解析:从基础实现到企业级方案
前端·vue.js·typescript
云上凯歌3 小时前
01 ruoyi-vue-pro框架架构剖析
前端·vue.js·架构
毕设十刻4 小时前
基于Vue的迅读网上书城22f4d(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
爱健身的小刘同学4 小时前
Vue 3 + Leaflet 地图可视化
前端·javascript·vue.js
musashi6 小时前
用 Electron 写了一个 macOS 版本的 wallpaper(附源码、下载地址)
前端·vue.js·electron
徐徐子6 小时前
从vue3 watch开始理解Vue的响应式原理
前端·vue.js
嘉琪0017 小时前
provide 和 inject的理解?
前端·javascript·vue.js