html中引入字体包

1：下载字体包

之前在http://www.downyi.com/downinfo/181562.html  网站中下载过字体包。有的情况下会有附带插件。

2：字体包放在项目中

字体包存在项目文件中

 

 

 

3：新建font.css文件，在里面写入以下代码

 

@font-face {
    font-family: "HYLeMiaoTi";        //自定义字体名称
    src:url("HYLeMiaoTiJ.ttf");       //字体包路径
    font-weight: normal;
    font-style: normal;
}
/***和下面这个效果一样***/
@font-face {
    font-family: HYLeMiaoTi;        //自定义字体名称
    src:url("HYLeMiaoTiJ.ttf");       //字体包路径
    font-weight: normal;
    font-style: normal;
}

4：在html中引入font.css

 

    
    
    
    
    
    //引入字体
    

5：需要用到字体的地方

 

.font1 {
  font-size:px2rem(40);
  color:red;
  font-family:HYLeMiaoTi;   //在font.css中自定义的字体名称
  
 // font-family: HYLeMiaoTi,"Microsoft YaHei","微软雅黑";  //第一种字体不支持情况下，往后类推选择支持的字体
}
/***和下面这个效果一样***/
.font1 {
   font-size:px2rem(40);
   color:red;
  font-family:"HYLeMiaoTi";   //在font.css中自定义的字体名称
}

6：效果

 

汉仪乐喵体

后面有时间找一个字体库，或者收集一些常用的字体包。