博客

html中引入字体包

  • Post author:
  • Post category:其他


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


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

6：效果

汉仪乐喵体

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


版权声明：本文为weixin_42400404原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。