vue中如何添加字体

背景：

1、由于字体大小400、500、600在移动端可能区分不明显

2、ui有字体要求

3、以Stolzl为主（Book, Regular, Medium，区分400、500、600）

如图

下载地址

这里我用google账号登录了google浏览器

步骤一：

1.点击对应右侧的黄色箭头下载，出现下图，点击WEB(可能需要先分享)

2.点击Stolzl Book for WEB

3.下载成功，并解压（文件夹结构类似）

步骤二：代码中导入

1、style文件夹中创建fonts文件夹，添加你想要的字体包（这里只导对应的3个的.ttf,你可以根据需要导入）

2、style文件夹中创建font.css font-family和url可根据你需要随意更改（路径正确即ok：这里你也可以把字体放CDN，导入线上地址，font-family随意，只要你能区分就行）

/* 最细 */
@font-face {
    font-family: StolzlBook;
    src: url('./fonts/StolzlBook.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* 中等 */
@font-face {
    font-family: StolzlRegular;
    src: url('./fonts/StolzlRegular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* 粗 */
@font-face {
    font-family: StolzlMedium;
    src: url('./fonts/StolzlMedium.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

步骤三：以类的形式添加到公共样式中，方便设置字体大小样式

StolzlBook、StolzlRegula、StolzlMedium需要和你之前写的font-family一致

.font-family-regular {
	font-family: StolzlBook, PingFang SC, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, Helvetica, Arial, monospace, sans-serif;
}

// 中等
.font-family-medium {
	font-family: StolzlRegular, PingFang SC, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, Helvetica, Arial, monospace, sans-serif;
}

// 加粗
.font-family-bold {
	font-family: StolzlMedium, PingFang SC, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, stolzl, Helvetica, Arial, monospace, sans-serif;
}

步骤四：代码中使用

1、打包入口js中，导入样式

import '../../style/fonts.css';

2、代码中使用

<p style="text-align: center" class="font-family-regular">StolzlBook</p>
<p style="text-align: center" class="font-family-medium">StolzlRegular</p>
<p style="text-align: center" class="font-family-bold">StolzlMedium</p>

效果：

perfect！！！！