美文网首页
原 前端项目,引入苹方字体

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

作者: 独行侠_ef93 | 来源:发表于2019-02-05 13:50 被阅读0次

    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

    相关文章

      网友评论

          本文标题:原 前端项目,引入苹方字体

          本文链接:https://www.haomeiwen.com/subject/hwhvsqtx.html