本文主要是介绍HTML5:七天学会基础动画网页6，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
CSS3自定义字体
①：首先需要下载所需字体
②：把下载字体文件放入 font文件夹里，建议font文件夹与 css 和 image文件夹平级
③：引入字体，可直接在html文件里用@font-face引入字体，分别是字体名字和路径
例:
<style>
p{
width: 200px;
height: 100px;
margin: 40px auto;
border: 1px solid black;
text-align: center;
font-family:'name' ;
(此处给引入字体起名)
}
@font-face(此处用于引用字体){
font-family:'name';(注意名字相同)
src: url(./);
...............
}
</style>
</head>
<body>
<p>hello world</p >
</body>
当我们引用很多字体时，可能不知道哪个具体生效，加载速度慢，第一时间加载不出来，最好做成图片，速度快。
字体图标
关于我们日常设计时需要一些图标，苦无没有素材，我们这里以阿里图标库为例。
首先引入下载好的字体图标的css文件
我们重命名iconfont
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="./......">
</head>
<body>
<span class="iconfont (后面这里是在阿里图标库font class中复制的代码)"></span>
</body>
如果我们想保留彩色的图标:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jingdong边侧栏练习</title>
<!-- 引入css和js样式 -->
<link rel="stylesheet" href="./iconfont/iconfont.css">
<script src="./ionFont/ionFont.js"></script>
<style>
/* 设置样式 */
.icon{
width: ;
height: ;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<body>
<!-- 照着写就行，主要use标签注意#后为引入图标名称 -->
<svg class="icon" aria-hidden="true">
<use xlink:href="#(阿里图标库中fontclass复制的代码，注意要先下载到本地)"></use>
</svg>
</body>
这里再提供几个别的图标网站
iconfont: https://www.iconfont.cn
iconstore：https://iconstore.co
feathericons: https://feathericons.com
Heroicons：https://heroicons.com
Remix Icon： https://remixicon.com
iconpark:https://iconpark.oceanengine.com
Flat Icon： https://www.flaticon.com
Css.gg： https://css.gg
还有很多别的网站，对这个的建议是有开源的材料就用免费的，素材多的是。
这篇关于HTML5:七天学会基础动画网页6的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
