一、准备好字体文件
一般字体问价格式为 .tff,可以去包图网等等网站去下载,好看的太多了!!!
下载下来就是单个的 .tff文件,下载下来后可以进行重命名,但是不要改变他的后缀名,我把他命名为me.tff:
二、vue配置
知其然也要知其所以然,简单说下替换字体的原理:
下载一个字体文件,然后在 app.vue的style里面使用 @font-face 配置相关的字体配置,配置完之后,相当于整个样式当中就多了一个你设置的字体,然后你就可以在任何vue页面进行使用了。
下面开始使用:
1.app.vue里面配置字体信息
@font-face {
font-family: "me-word";
src: url('./assets/me.ttf');
font-weight: normal;
font-style: normal;
}
代码说明:
font-family:这个是你自定义的字体名称,建议个性化一点,不要和系统已有字体重名!
src:这是字体文件相对于app.vue的地址
另外两个参数,保持默认吧
我的文件路径配置如下,是直接放在assets的文件夹里面的,你也可以在里面创建个font文件夹,但是对应路径也要增加;这块的url里面就是一个相对路径地址
2.在具体页面进行使用
在页面的div中,使用一个样式,比如 text-style,然后咋style标签里面进行配置:
.text-style {
font-family: 'me-word', sans-serif;
font-size: 40px;
line-height: 50px;
}
整体示例页面如下:
3.看效果