CSS3字体和字体图标

字体和字体图标

1、CSS3嵌入网络字体

1、https://www.dafont.com/
2、可以通过网站下载自己喜欢的字体
3、在style里面通过@font-face定义这个字体和字体的所在位置，就可以通过font-family引入这个字体
     @font-face{
           font-family: myfont;
           src: url(../font/suite/SuitePersonalUse.ttf);  

        }
        div{
            font-family: myfont;
        }
4、font-family：定义文本的字体系列
5、文字阴影：
   可以使用text-shadow属性将阴影应用于文本
6、text-shadow：x,y,blur,color
   x:水平阴影的位置，允许负值
   y:垂直阴影的位置，允许负值
   blur：可选，模糊的距离
   color：可选，阴影的颜色

2、文字效果设置

    
    
    
    
    



    
内阴影效果
    
3D立体效果
    
霓虹灯效果
    
凸版效果
    
浮雕效果
    
描边效果
    
抽空文字
    
图片填充文字
    
模糊效果

2、字体图标

1、字体图标就是一些小图标，主要用于显示网页中的一些通用的、常用的一些小图标。
2、字体图标展示的是图标，实际上属于字体。
3、字体图标的优点：
   轻量级：图标字体比图像要小，字体加载后图标就会马上渲染出来。减少服务器请求
   灵活性：本质是文字，可以随意的改变颜色，产生阴影，透明效果，旋转
   兼容性：几乎支持所有的浏览器，请放心使用
4、字体图标不能替代精灵图，只是对图标技术的部分提升和优化
5、简单的使用字体图标，复杂的使用精灵图
6、字体图标的使用：
   1、字体图标的下载
   2、对字体图标的引入
7、不同的浏览器支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文    件
8、通过link在css引入，然后设置类名。在css样式中全局声明字体，
    
   
9、通过css引入页面。注意字体文件路径的问题：在style.css里面复制@font-face的字体声明代码，然后粘贴。然后把小框框复制过去，然后在该图标添加字体(记得修改路径)
     @font-face {
            font-family: 'icomoon';
         
            src: url('../icomoon/fonts/icomoon.eot?adcps6');
            src: url('fonts/icomoon.eot?adcps6#iefix') format('embedded-opentype'),
                url('../icomoon/fonts/icomoon.ttf?adcps6') format('truetype'),
                url('../icomoon/fonts/icomoon.woff?adcps6') format('woff'),
                url('../icomoon/fonts/icomoon.svg?adcps6#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

   
        span {
            font-family: 'icomoon';
        }
         

3、字体图标库

1、https://www.iconfont.cn/
2、https://icomoon.io/
3、https://fontawesome.com/
4、注意：可以通过add下载更多彩色的图标，通过编辑放大缩小调整方向后下载，然后生成字体，我们就可以下载了
5、得到的压缩文件夹，会有四个文件

1、进入网站

2、点击图标

3、可以选择更多的图标

4、点击添加，可以选择更多的字体库

5、可以通过编辑改变字体图标的大小和旋转的位置

6、生成字体图标

7、生成之后，下载得到压缩文件夹，保存起来，然后使用

[
8、引入后选择小方框

4、字体声明代码

    
    
    
    
    



    

5、css引入代码

6、字体图标的追加

1、如果需要添加新的字体图标到原来的字体文件中，需要：
   把压缩包里面的selection.json重新上传，选中自己想要的新的图标，重新下载压缩包，并替换原来的文件就可以
   1、重新点击iconapp进入页面
   2、选择import icons重新上传自己的selection.json
   3、继续添加想要的字体图标
   4、重新生成，然后重新下载
   5、替换原来的文件夹

第2步