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

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

相关推荐
前端菜鸟日常14 分钟前
为啥vue3设计不直接用toRefs,而是reactive+toRefs
vue.js
谢尔登2 小时前
Vue 和 React 响应式的区别
前端·vue.js·react.js
酷酷的阿云2 小时前
Vue3性能优化必杀技:useDebounce+useThrottle+useLazyLoad深度剖析
前端·javascript·vue.js
天蓝色的鱼鱼2 小时前
无虚拟DOM的 Vue Vapor 来了!性能炸裂,开发者必看!
前端·vue.js
bin91532 小时前
DeepSeek 助力 Vue 开发:打造丝滑的缩略图列表(Thumbnail List)
前端·javascript·vue.js·ecmascript·deepseek
格式化小拓2 小时前
v-for的使用,遍历数组、对象、数字、字符串等类型
vue.js
鑫~阳2 小时前
Vue2是如何利用Object.defineProperty实现数据的双向绑定?
前端·vue.js·vue
禾苗种树2 小时前
使用echart的dataZoom的labelFormatter自定义时间范围
前端·javascript·vue.js·echart
轻口味3 小时前
Vue.js Vue 测试工具:Vue Test Utils 与 Jest
vue.js
Hermione_log3 小时前
【vue项目如何利用event-stream实现文字流式输出效果】
前端·javascript·vue.js