vue全局自定义字体，提高项目字体美化

Posted 2023-01-21 水香木鱼

---

💌 作者简介

1. 📖 个人介绍：小伙伴们，大家好！我是水香木鱼，【前端领域创作者】😜
2. 📜 CSDN主页：水香木鱼
3. 📑 个人博客：陈春波
4. 🎨 系列专栏：后台管理系统
5. 🌹 一键四连：关注💋+点赞👍+收藏⭐+留言📝
6. 📢 人生箴言：即使没有万全准备，也要勇敢迈出第一步。

---

📢: 我们在项目开发时.或多或少 会给项目 添加全局字体;
添加字体的最佳方案,请看 👇 👇 👇 四步成功引入

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实现隐藏浏览器右侧滚动条功能