浅谈网络字体
很早就知道 CSS 可以通过 @font-face 来定义网络字体，不过一直没有实际使用过，刚好这次项目用到，特意记录下。
设计师给到的字体有两个文件 xxfont-regular.ttf 、xxfont-bold.ttf 。看名字就知道是不同字重的字体文件啦。紧接着疑惑来了 🤔，难道我还要定义两个不同的字体名？还是说我事先要把字体合并？有点太想当然了，还是乖乖去查资料吧。
果然 @font-face 有个 font-weight 可以指定字体的粗细，然后 font-family 设置相同的字体名称，我们就可以像使用本地字体一样直接使用啦。
关于@font-face 的更多细节
先看下 demo
@font-face {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-display: swap;
src: local("Roboto"), local("Roboto-Regular"),
url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2)
format("woff2");
}
@font-face {
font-family: "Roboto";
font-style: normal;
font-weight: 700;
font-display: swap;
src: local("Roboto Bold"), local("Roboto-Bold"),
url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2)
format("woff2");
}
font-family 猜一下就知道啦，这个可以指定字体的名称
font-weight 指定字体的粗细，就像上面提到的，我们可以给 font-family 起相同的名字，然后指定不同的 font-weight src 引用相对应字重就可以啦。
font-style 指定字体的是否斜体
font-display 指定字体的加载和渲染策略。不知道大家很久之前有没有遇到过这种情况，就是在浏览一些网站的时候，页面上的字要先空白很久，然后才渲染出来，造成很不好的体验。font-display 就是为了解决这个问题而出现的。font-display 有 auto | block | swap | fallback | optional 五种值。一般而言，我们只需要设置成 swap 就可以了，设置成 swap 如果字体没有加载完成，浏览器会立即显示文字，一旦字体切换成功，立即切换字体。至于其他几个值，这里就不展开了，可以查看文末的参考链接。
src 指定要导入到您的 CSS(url 部分)的字体文件的路径，local 可以填写本地字体名，我们通过他可以给字体起个别名。format 来声明字体的格式，不是必要的，但最好带上。字体的路径可以写多个，用逗号分隔，浏览器会搜索并使用它能找到的第一个。所以这里的顺序还是有讲究的，先写个 local 如果用户电脑装个这个字体了，就省的再去网络加载了。然后把新的字体格式比如 woff2 这种放前面。
unicode-range 指定字体的特定范围的字符——在支持浏览器中，只有指定的字符才会被下载。
此外还可指定字体的 font-variant 和 font-stretch 这里也不展开了。
有个需要注意的点：一般而言只有英文等比较小的字体，我们才会使用网络字体，中文的话，字体太大了，不太适合网络加载，除非做些优化。