html中引入字体包

1：下载字体包

之前在http://www.downyi/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


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <meta http-equiv="Access-Control-Allow-Origin" content="*"> -->
    <title>标题</title>
    //引入字体
    <link rel="stylesheet" href="Family/font.css">
</head>

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中自定义的字体名称
}