vue全局自定义字体,提高项目字体美化
生活随笔
收集整理的这篇文章主要介绍了
vue全局自定义字体,提高项目字体美化
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
💌 作者简介
📢: 我们在项目开发时.或多或少 会给项目 添加全局字体;
添加字体的最佳方案,请看 👇 👇 👇 四步成功引入
1、创建font文件夹
在assets 静态资源文件夹中,新建font 文件夹
//目录结构 ├──node_modules ├──public ├──src ├ ├──api ├ ├──assets //静态资源 ├ ├──images ├ ├──font //存放 公共字体的文件夹 ├ ├──common //存放字体的文件夹 ├ ├──weiruan.ttf ├ ├──changcheng.ttf ├ ├──songti.ttf ├ └── ...... ├ └──index.css ├ └── css ├ ├──components ├ └── views ├ ......2、 创建index.css
在刚刚创建好的font 文件夹中新建index.css 存放字体样式
/*公共字体的样式 */@font-face {font-family: 'weiruan';src:url('./weiruan.otf') format('otf'), url('./changcheng.woff') format('woff'), /* Modern Browsers */url('./songti.ttf') format('truetype'); /* Safari, Android, iOS */}3、全局注册
在脚手架中找到main.js 文件,引入我们需要全局使用的 index.css 文件
//main.js import './assets/font/index.css' //全局使用4、页面使用
在需要使用字体的页面,引入全局字体
div {font-family: weiruan; //使用字体}📖 博主致谢
感谢大家阅读到结尾,本次的文章就分享到这里,总结了【vue全局自定义字体,提高项目字体美化】,希望可以帮到大家,谢谢。
如果您觉得这篇文章有帮助到您的的话不妨【关注+点赞+收藏+评论+转发 】支持一下哟~~😛您的支持就是我更新的最大动力。👇👇👇👇👇👇
🛩往期精彩:
一文图解前端WebSocket 实时通信
vue 重置刷新页面数据(最快捷 简单的方式,全局定义)
vue如何通过url携带token,并且打开新页面
vue拖拽功能,提高你的开发效率
vue实现隐藏浏览器右侧滚动条功能
总结
以上是生活随笔为你收集整理的vue全局自定义字体,提高项目字体美化的全部内容,希望文章能够帮你解决所遇到的问题。
- 上一篇: Swift中的类和结构体(2)
- 下一篇: 江湖:任正非的仁义,王石的格局,柳传志的