css中@font-face的使用

首先@font-face这个属性是用来设置自定义的字体的，因为有时候如果我们直接使用font-family属性来制作网页使用自定义的字体，那么这个时候如果浏览器不支持你这种字体的话你设置的这种字体的话，浏览器会自动的采用默认的字体去显示你的网页。

这种情况下的话，我们就可以采用font-face这个属性去设置我们自定义的字体。例如：

// global.css
@font-face {
  font-family: 'MyFont';
  src: url('//test.com/fonts/../.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
body {
  margin: 0;
  font-family: 'MyFont';
}

在代码中@font-face有两个必要属性：

font-family：这个属性是为给你引入的字体起一个专属的名称，注意：这个属性的属性值名字不要和那些专属的名称起冲突了，比如：微软雅黑这种，不要和字体名字冲突。
src：这个属性的属性值就是你自定义字体的路径，我们一般采用相对路径去使用。
最后在需要使用的地方，给font-family的值为我们自己设置的@font-face里面的font-family的属性值；这样就把我们自定义的字体引入成功了。

注：这个自定义字体，大家可以直接去百度下载，一般字体都是 .ttf结尾的文件。