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(./);

            ...............

        }

   

   

hello world

   

 

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

字体图标

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

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

我们重命名iconfont

   

   

   

   

   

   

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

    
    
    
    
    
    
    


    
   
    
   
   

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

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

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