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

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

相关推荐
程序员小续1 小时前
React 多个 HOC 嵌套太深,会带来哪些隐患?
java·前端·javascript·vue.js·python·react.js·webpack
致微2 小时前
Vue项目 bug 解决
前端·vue.js·bug
阿丽塔~6 小时前
Vue2/Vue3异同整理
vue.js
七月的尾巴←_←6 小时前
Java8+Spring Boot + Vue + Langchain4j 实现阿里云百炼平台 AI 流式对话对接
vue.js·spring boot·阿里云
土豆丶杨7 小时前
vue3+electron 桌面应用初始化
javascript·vue.js·electron
气π9 小时前
【Vue-组件】学习笔记
vue.js·笔记·学习
一颗奇趣蛋9 小时前
vue哪些情况称作“销毁组件”
前端·vue.js
Neverthe1ess9 小时前
创新项目实训开发日志1
前端·javascript·vue.js·vue
简 洁 冬冬10 小时前
004 Vue Cli脚手架(vue2)
前端·vue.js
苏卫苏卫苏卫10 小时前
【Vue】选项卡案例——NBA新闻
开发语言·前端·javascript·css·vue.js·笔记