vue页面使用自定义字体

一、准备好字体文件

一般字体问价格式为 .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.看效果