vue全局自定义字体,提高项目字体美化
📢: 我们在项目开发时.或多或少 会给项目 添加全局字体;添加字体的最佳方案,请看👇 👇 👇 四步直接搞定
·
💌 作者简介
- 📖 个人介绍:小伙伴们,大家好!我是水香木鱼,【
前端领域创作者
】😜 - 📜 CSDN主页:水香木鱼
- 📑 个人博客:陈春波
- 🎨 系列专栏:后台管理系统
- 🌹 一键四连:关注💋+点赞👍+收藏⭐+留言📝
- 📢 人生箴言:即使没有万全准备,也要勇敢迈出第一步。
📢: 我们在项目开发时.或多或少 会
给项目 添加全局字体
;
添加字体的最佳方案,请看 👇 👇 👇四步
成功引入
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全局自定义字体,提高项目字体美化】
,希望可以帮到大家,谢谢。
如果您觉得这篇文章有帮助到您的的话不妨【关注+点赞+收藏+评论+转发
】支持一下哟~~😛您的支持就是我更新的最大动力。👇👇👇👇👇👇
🛩往期精彩:
更多推荐
已为社区贡献20条内容
所有评论(0)