02-CSS基础与进阶-day11_2018-09-17-20-08-19

╰+哭是因爲堅強的太久メ 2022-01-05 11:47 126阅读 0赞

本次内容  
字体图标  
css3 2d和3d

字体图标  
优点 1 可以做出和图片一样的事情  
2 本质是文字，所以可以任意去修改颜色 大小 阴影 。。。。  
3 本身体积小 携带的信息没有削减  
4 几乎所有浏览器支持，移动设备必备良药  
使用  
场景 公司内部自己设计图标  
1 UI设 计字体图标效果图 （svg）  
2 前端人员上传生成兼容性字体文件包 比如  
https://icomoon.io/

（其他网站：www.iconfont.cn  www.fontello.com）  
3 下载字体文本包到本地  
4 把字体文件包引入到html页面中

在原来字体库如何追加新的图标

方法：将原来的字体库的json文件，重新生成字体，下载字体文本（解压将fonts文件夹剪切到文件中来）包到本地

![1603260-20190623182303613-1846682401.png][]

CSS3  
2d之变形 平移 缩放 旋转 倾斜  
3d  
伸缩布局

@font-face {  /* µçÄÔÖÐÃ»ÓÐµÄ×ÖÌå£¬ÎÒÃÇÐèÒªÉùÃ÷ */
      font-family: 'icomoon';
      src:  url('fonts/icomoon.eot?7kkyc2');
      src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
        url('fonts/icomoon.woff?7kkyc2') format('woff'),
        url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
    }

![1603260-20190623154801916-2026852445.png][]

![1603260-20190623175521205-269347998.png][]

![1603260-20190623180043010-221191956.png][]

![1603260-20190623180112902-2006633968.png][]

![1603260-20190623181302667-1943603752.png][]

01字体图标.html

![1603260-20190623182526466-434399171.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            @font-face {
           /* 电脑中没有的字体，我们需要声明 */
              font-family: 'icomoon';
              src:  url('fonts/icomoon.eot?7kkyc2');
              src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
              url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
              url('fonts/icomoon.woff?7kkyc2') format('woff'),
              url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
              font-weight: normal;
              font-style: normal;
            }
    
            span {
         
                font-family: "icomoon";
                font-size: 200px;
                color: red;
            }
    
            p::before {
         
                font-family: "icomoon";
                font-size: 100px;
                content: "\e93e";
            }
    
        </style>
    </head>
    <body>
        <span></span>
        <span></span>
        <p></p>
    </body>
    </html>

转载于:https://www.cnblogs.com/HiJackykun/p/11073671.html

[1603260-20190623182303613-1846682401.png]: /images/20211229/acd75088dd93472c806f8695151c9498.png
[1603260-20190623154801916-2026852445.png]: /images/20211229/63b2093ebd1e4da8a92dcb4a6a275c26.png
[1603260-20190623175521205-269347998.png]: /images/20211229/1afa7741c2734b909c3b8e4bd68a1aed.png
[1603260-20190623180043010-221191956.png]: /images/20211229/ca1e0cf3e278479d8d030a0e39868f35.png
[1603260-20190623180112902-2006633968.png]: /images/20211229/e469e4505f5d409b95d57898d97baffa.png
[1603260-20190623181302667-1943603752.png]: /images/20211229/25963199291243adab83314de419de62.png
[1603260-20190623182526466-434399171.png]: /images/20211229/0b785909bb904226adc38e29c91b268e.png