字型圖示的幾種引入方式

圖檔缺點是增加了總檔案大小，不能很好地進行“縮放”，因為放大和縮小會失真

字型圖示（iconfont）可做出跟圖檔一樣的事，改變透明度、旋轉度等，但其本質是文字，可以很随意地改變顔色、産生陰影、透明效果等，本身體積更小但攜帶的資訊沒有削減，幾乎支援所有的浏覽器，移動端裝置必備

使用流程

❶ UI人員設計字型圖示效果圖(svg)，在 illustrator 或 Sketch 這類矢量圖形軟體中建立 icon 圖示之後儲存為 svg 格式

❷ 前端人員上傳生成相容性字型檔案包

❸ 前端人員下載下傳相容性字型檔案包

❹ 把字型檔案包引入HTML頁面中

一般是用現成的，常用網站：阿裡icon font字庫、Font-Awesome、icomoon字庫、fontello等

下載下傳阿裡的字型圖示後裡面會有使用說明，阿裡的字型圖示有三種引入方式：unicode、font-class和symbol方式

unicode方式

unicode 方式應該是最開始接觸最熟悉的方式，在 css 中像定義 Web 字型一樣，定義将要使用的 iconfont 的名字還有引入位址，再在類樣式中使用此字型，設定大小顔色等，最後在元素裡添加類并粘貼字型編碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @font-face{
            font-family: \'iconfont\';
            src: url(\'iconfont/iconfont.eot\');
            src: url(\'iconfont/iconfont.eot?#iefix\') format(\'embedded-opentype\'),
            url(\'iconfont/iconfont.woff\') format(\'woff\'),
            url(\'iconfont/iconfont.ttf\') format(\'truetype\'),
            url(\'iconfont/iconfont.svg#iconfont\') format(\'svg\');
        }
        .iconfont{
            font-family: "iconfont";
            font-size:16px;
            font-style: normal;
        }
    </style>
</head>
<body>
    <i class="iconfont">&#xe602;</i>
</body>
</html>

也可以使用僞元素的方式添加字型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> 

      <!--同上，略-->

        .iconfont{
            font-family: "iconfont";
            font-size:16px;
            font-style: normal;
        }
        i::before{
            content:"\e602";
        }
    </style>
</head>
<body>
    <i class="iconfont"></i>
</body>
</html>

字型編碼在 html 中是  ，在 css 中是 \e602

font-class方式

font-class 方式是引入其 css 檔案，該定義該設定的此檔案已經幫做好，是以我們直接用類樣式就能使用對應的字型圖示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
</head>
<body>
    <i class="iconfont icon-aixin"></i>
</body>
</html>

symbol方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .icon {
            width: 1em; height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
</head>
<body>
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-aixin"></use>
</svg>
<script src="iconfont/iconfont.js"></script>
</body>
</html>

這種方式是第一次使用，直接照說明文檔做即可，感覺不如 font-class 方式簡便，但支援多色圖示是一大優點