HTML5:七天学会基础动画网页6

CSS3自定义字体

①:首先需要下载所需字体

②:把下载字体文件放入 font文件夹里,建议font文件夹与 css 和 image文件夹平级

 ③:引入字体,可直接在html文件里用@font-face引入字体,分别是字体名字和路径

例:

   

hello world

   

 

当我们引用很多字体时,可能不知道哪个具体生效,加载速度慢,第一时间加载不出来,最好做成图片,速度快。

字体图标

关于我们日常设计时需要一些图标,苦无没有素材,我们这里以阿里图标库为例。

首先引入下载好的字体图标的css文件

我们重命名iconfont

   

   

   

   

   

   

如果我们想保留彩色的图标:

    

    

    jingdong边侧栏练习

    

    

    

    

    

   

   

这里再提供几个别的图标网站

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

 还有很多别的网站,对这个的建议是有开源的材料就用免费的,素材多的是。