原 前端项目,引入苹方字体

UI用的IMac,设计图默认使用的字体为
pingFangSC-Regular
与UI协商后,决定在项目里引入本地的字体库
以达到与设计图同样的效果
首先下载font字体库
这里下载的是ttf文件(并不完全兼容所有浏览器)

里面有重复的,均为下载试用的

在font.css中
@font-face {
  font-family: 'pingFangSC-Medium';
  src: url('PingFang Medium.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face{
  font-family: 'pingFangSC-Light';
  src: url('PingFang Light.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face{
  font-family: 'pingFangSC-Regular';
  src: url('pingFangRegular.ttf');
  font-weight: normal;
  font-style: normal;
}

然后在vue项目中引入

window下的效果

上面为pingfangSC-ligth

下面为pingfangSC-regular

你可能感兴趣的:(原 前端项目,引入苹方字体)