天天看點
傳回

前端工程師-字型圖示-使用（iconfont為例）

前言

字型圖示的使用已經非常廣泛了，在本片中講解兩種使用方式：

A.字型圖示Unicode如何表示附上使用代碼

1.html标簽中使用

2.js中使用

3.canvas中使用

B.官方推薦：symbol使用

注：示例均以iconfont為例 （https://www.iconfont.cn/）；

首先必做

1.下載下傳圖示下載下傳好後，大家可以看到這個檔案夾；

前端工程師-字型圖示-使用（iconfont為例）

 打開以後（太友好了，全部給你寫好）：

前端工程師-字型圖示-使用（iconfont為例）

2.将下載下傳的檔案放進需要的項目中

打開iconfont.css檔案，大家會看到@font-face的定義（關于@font-face詳細，請點選）

@font-face {
  font-family: "iconfont";
  src: url(\'iconfont.eot?t=1593421399048\'); /* IE9 */
  src: url(\'iconfont.eot?t=1593421399048#iefix\') format(\'embedded-opentype\'), /* IE6-IE8 */
  url(\'data:application/x-font-woff2;charset=utf-8;base64,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\') format(\'woff2\'),
  url(\'iconfont.woff?t=1593421399048\') format(\'woff\'),
  url(\'iconfont.ttf?t=1593421399048\') format(\'truetype\'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url(\'iconfont.svg?t=1593421399048#iconfont\') format(\'svg\'); /* iOS 4.1- */
}

此處引用張鑫旭：https://www.cnblogs.com/hustskyking/p/manufacture-font-face-in-web.html

format 格式 Font 格式 字尾名
truetype TrueType .ttf
opentype OpenType .ttf, .oft
truetype-aat TrueType with Apple Advanced Typography extensions .ttf
embedded-opentype Embedded OpenType .eot
svg SVG Font .svg, .svgz

這堆麻煩的字型格式的出現，是因為各種浏覽器對他們的支援程度不一樣：

浏覽器 支援類型
IE6,7,8 僅支援 Embedded OpenType(.eot) 格式。
Firefox 3.5 支援 TrueType、OpenType(.ttf, .otf) 格式。
Firefox 3.6 支援 TrueType、OpenType(.ttf, .otf) 及 WOFF 格式。
Chrome,Safari,Opera 支援 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。

1.html标簽中使用

在标簽中使用也是我們最常見使用的方式

前端工程師-字型圖示-使用（iconfont為例）

 2.js中使用

 這裡附上代碼：可以直接考過去驗證：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 這裡的href路徑要記得換成自己的路徑 -->
    <link rel="stylesheet" type="text/css" href="font_ztktsv718x/iconfont.css">
</head>
<body>
<script>  
    function createIconContent(text){
        let span = document.getElementById(\'IconContent\');
        if(!span){
            span = document.createElement("span");
            p = document.createElement("p");
            p.innerText = "我是用js動态生成标簽寫入Unicode編碼顯示出來的圖示："
            span.id = \'IconContent\';
　　　　　　　//這裡的className要記得換成font-face中的font-family後起的名字
            span.className = "iconfont";
            // span.style.display = \'none\';
            document.body.appendChild(p);
            document.body.appendChild(span);
        }     
        span.innerText = text;      
    }
　　//這裡的編碼在
    createIconContent(\'\ue8ae\');
    // \u指定為Unicode編碼
</script>
</body>
</html>

說明：Unicode編碼可以在iconfont.css檔案中找到

 3.canvas中使用

 這裡附上代碼：可以直接考過去驗證：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 别忘記換路徑哈 -->
    <link rel="stylesheet" type="text/css" href="font_ztktsv718x/iconfont.css">
</head>
<body>
<div>
    <p>我是用canvas畫出來的字型圖示:</p>
    <canvas id="canvas" width="1000" height="500"></canvas>
</div>

<script>
    var width = 120; // 圓角矩形的寬度
    var height = 80; // 圓角矩形的高度
    var x = 400;
    var y = 300;
    var radius = 50;
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = \'#1ABFFF\';      //樣式1
    ctx.font = \'48px iconfont\';  //  !!!設定字型， 字型可以随意
    //  繪制内容
    ctx.fillText(\'\ue8ae\', 10, 50);  
     ctx.stroke();         
</script>
</body>
</html> 

未來推薦：symbol使用方式

這個為什麼單獨拎出來說呢，因為這種使用方式是目前最推薦的使用方式先來看看iconfont官網中的說明：

 現在我們把代碼寫出來，然後進行一下驗證，再來解釋我自己看了以後疑惑的幾個地方

附上代碼：

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

我不認識的地方有以下幾點：

1.symbol使用是什麼意思？

2.fill: currentColor;是什麼意思？

3.支援多色圖示了我要驗證一下

4.通過什麼技巧，支援像字型那樣，通過

font-size

,

color

來調整樣式呢？

5.aria-hidden="true"是個什麼屬性？

有問題就可以一個一個解答了：

1.symbol使用是什麼意思？

symbol：象征，辨別的意思，這個symbol可不是ES6中的symbol，不知道是不是我百度的姿勢有問題始終找不到symbol使用的精髓，是以我格式化了一下iconfont.js檔案，然後我發現了我熟悉的html标簽， 我立刻去百度svg symbol

前端工程師-字型圖示-使用（iconfont為例）

很慶幸，我找到的第一篇文章就部分解決了我上面的1，2，4的問題，我們來看看這篇文章：https://www.cnblogs.com/liangxuru/p/7159850.html；請認認真真的看看這篇文章。

當我讀了文章讀到一半的時候，我又回頭看了代碼，發現，其實這一段可以不用寫：

前端工程師-字型圖示-使用（iconfont為例）

那為什麼官方還要給你這一段代碼呢？其實是為了讓你自定義的。接下來解決剩下的問題就可以消除我的疑惑了

1.雖然我知道了，fill是svg的一個屬性，那麼這個currentColor肯定是個關鍵字，可是這個關鍵字是指什麼呢？

下面是來自MDN的解釋：此處參考文章

currentColor

 代表了目前元素被應用上的

color

顔色值。 使用它可以将目前這個顔色值應用到其他屬性上，或者嵌套元素的其他屬性上。

你這可以這麼了解，CSS裡你可以在任何需要寫顔色的地方使用

currentColor

 這個變量，這個變量的值是目前元素的

color

 值。如果目前元素沒有在CSS裡顯示地指定一個

color

 值，那它的顔色值就遵從CSS規則，從父級元素繼承而來。

好那我立刻來實踐一下：首先我們寫好屬性如下

前端工程師-字型圖示-使用（iconfont為例）

 既然

currentColor

代表了目前元素被應用上的

color

顔色值，那我們就把上面的color值放出來：

嗯，實踐出真知，那為什麼我不直接設定fill的值呢，我想應該是為了友善我們使用圖示時設定顔色，因為color是個可繼承的屬性，即使沒有設定，也可以繼承父親的顔色

3.支援多色圖示了我要驗證一下

前端工程師-字型圖示-使用（iconfont為例）

 驗證成功，因為圖示是公司機密，我就用馬賽克拉。

5.aria-hidden="true"是個什麼屬性？

現代的輔助技術能夠識别并朗讀由 CSS 生成的内容和特定的 Unicode 字元。為了避免螢幕識讀裝置抓取非故意的和可能産生混淆的輸出内容（尤其是當圖示純粹作為裝飾用途時），我們為這些圖示設定了 aria-hidden=“true” 屬性。通俗點說就是為螢幕識讀裝置過濾無關資訊。

附加題外話：

一篇文章會發現我寫了三種用法都是為了顯示這一個圖示：

回顧一下使用部分：

<!-- iconfont.css -->
.icon-dianyingpiao:before {
  content: "\e8ae";
}

<!-- icon.html -->
<span class="iconfont">&#xe8ae;</span></xmp>
<span class="iconfont icon-dianyingpiao"></span>

<script>
ctx.fillText(\'\ue8ae\', 10, 50);
</script>

高亮的部分都表示上面哪個藍色的圖示的Unicode編碼在html，css，js中的不同表示形式。

1.簡單說說Unicode？

Unicode是一個字元集，他為每一個字元安一個編号，比如null，你的編号就是0 這個編号在Unicode中叫做"碼點"（code point）

U+0000 = null //U+表示緊跟在後面的十六進制數是Unicode的碼點。
U+597D = "好"

現在Unicode已經存了10萬多個符号了，他可以從U+0000~U+FFFF...  目前除了Unicode字元集我們還有ASCII字元集、GB2312字元集等。

2.html5，css，js使用的字元集Unicode與字元編碼UTF-8

在html5，JS中使用Unicode字元集，在html5/css/js中使用的時候需要用特殊的符号進行轉義，詳細的可以狠狠戳這裡

html &#x + 16進制編碼  + ；
&# + 10進制編碼  + ；
css \ + 16進制編碼
js \u + 4位16進制編碼
\x + 2位16進制編碼

關于Unicode的介紹我建議直接讀阮大哥的文章，請狠狠的戳這裡，還有這裡，不過在這裡還是要簡單的介紹一下（此處的介紹均是參考阮老師的文章）

字元集和編碼？

字元集是書寫系統中使用的字母和符号的集合。例如，ASCII字元集、Unicode字元集。字元集中的字元作為一個或多個位元組存儲在計算機中。每個位元組或位元組序列代表一個給定的字元。

字元編碼是将字元集轉換為計算機可以接受的數字系統的數的規則

上一篇: css字型圖示的制作和使用。
下一篇: _weak typeof(self) weakSelf = self