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

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

相关推荐
小福气_几秒前
自定义组件 vue3+elementPlus
前端·javascript·vue.js
是谁眉眼16 分钟前
vue环境变量
前端·javascript·vue.js
鹏北海-RemHusband17 分钟前
Vue 组件解耦实践:用回调函数模式替代枚举类型传递
前端·javascript·vue.js
海上彼尚21 分钟前
vite+vue3 ssg预渲染方案
前端·javascript·vue.js
北辰alk30 分钟前
Vue 数组响应式原理深度解析:这些方法为何能被监听到?
vue.js
想努力找到前端实习的呆呆鸟33 分钟前
vscode编写vue代码的时候一聚焦就代码块变白?怎么回事如何解决
vue.js·visual studio code
webkubor33 分钟前
一次 H5 表单事故:100vh 在 Android 上到底坑在哪
前端·javascript·vue.js
Aniugel35 分钟前
Vue2怎么搭建前端性能/错误/行为监控体系
vue.js·面试·监控
神秘的猪头35 分钟前
🎉 React 的 JSX 语法与组件思想:开启你的前端‘搭积木’之旅(深度对比 Vue 哲学)
前端·vue.js·react.js
江公望1 小时前
VUE3 data()函数浅谈
前端·javascript·vue.js