html中引入字体包

最新推荐文章于 2024-01-25 21:25:58 发布

墨轩尘

最新推荐文章于 2024-01-25 21:25:58 发布

阅读量1w

点赞数 7

文章标签： html5 css

本文链接：https://blog.csdn.net/weixin_42400404/article/details/116608179

版权

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：效果

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

墨轩尘

关注

7
点赞
踩
21

收藏

觉得还不错? 一键收藏
5
评论
html中引入字体包

1：下载字体包之前在http://www.downyi.com/downinfo/181562.html 网站中下载过字体包。有的情况下会有附带插件。2：字体包放在项目中字体包存在项目文件中3：新建font.css文件，在里面写入以下代码@font-face { font-family: "HYLeMiaoTi"; //自定义字体名称 src:url("HYLeMiaoTiJ.ttf"); //字体包路径 font-wei.
复制链接

扫一扫