文汇网站建设,taoyin8 wordpress,最好的设计公司,wordpress网店主题一、准备好字体文件
一般字体问价格式为 .tff#xff0c;可以去包图网等等网站去下载#xff0c;好看的太多了#xff01;#xff01;#xff01; 下载下来就是单个的 .tff文件#xff0c;下载下来后可以进行重命名#xff0c;但是不要改变他的后缀名#xff0c;我把他…一、准备好字体文件
一般字体问价格式为 .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.看效果
