Vue使用自定义字体样式
步骤一
拿到自定义字体包
首先要得到自定义字体包(后缀名为.ttf, .otf, .eot等格式的字体包),可自行下载也可以问UI要字体包。
步骤二
在项目文件夹中进行放置自定义字体包的配置
在项目assets文件夹下新建font文件夹,将拿到的字体包放在font文件夹中;
新建一个font.css文件
步骤三
font.css文件配置
在font.css文件中定义所用字体
@font-face { font-family: 'ZI DING YI'; /* 重命名字体名 */ src: url('ZI DING YI.TTF'); font-weight: normal; font-style: normal; }
步骤四
在app.vue中引入font.css
<style lang="scss"> @import './assets/font/font.css'; #app { font-family: 'PingFang-RE'; font-weight: 400; } </style>
全局自定义字体,提高项目字体美化
我们在项目开发时.或多或少 会给项目 添加全局字体;
添加字体的最佳方案,请看 👇 👇 👇 四步成功引入
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; //使用字体 }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。