前言
字體圖標的使用已經非常廣泛了，在本片中講解兩種使用方式：
A.字體圖標Unicode如何表示附上使用代碼
1.html標簽中使用
2.js中使用
3.canvas中使用
B.官方推薦：symbol使用
注：示例均以iconfont為例 （https://www.iconfont.cn/）；
首先必做
1.下載圖標下載好后，大家可以看到這個文件夾；
打開以后（太友好了，全部給你寫好）：
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標簽中使用
在標簽中使用也是我們最常見使用的方式
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
很慶幸，我找到的第一篇文章就部分解決了我上面的1，2，4的問題，我們來看看這篇文章：https://www.cnblogs.com/liangxuru/p/7159850.html；請認認真真的看看這篇文章。
當我讀了文章讀到一半的時候，我又回頭看了代碼，發現，其實這一段可以不用寫：
那為什么官方還要給你這一段代碼呢？其實是為了讓你自定義的。接下來解決剩下的問題就可以消除我的疑惑了
1.雖然我知道了，fill是svg的一個屬性，那么這個currentColor肯定是個關鍵字，可是這個關鍵字是指什么呢？
currentColor代表了當前元素被應用上的color顏色值。 使用它可以將當前這個顏色值應用到其他屬性上，或者嵌套元素的其他屬性上。你這可以這么理解，CSS里你可以在任何需要寫顏色的地方使用
currentColor這個變量，這個變量的值是當前元素的color值。如果當前元素沒有在CSS里顯示地指定一個color值，那它的顏色值就遵從CSS規則，從父級元素繼承而來。
好那我立刻來實踐一下：首先我們寫好屬性如下
既然currentColor代表了當前元素被應用上的color顏色值，那我們就把上面的color值放出來：
嗯，實踐出真知，那為什么我不直接設置fill的值呢，我想應該是為了方便我們使用圖標時設置顏色，因為color是個可繼承的屬性，即使沒有設置，也可以繼承父親的顏色
3.支持多色圖標了我要驗證一下
驗證成功，因為圖標是公司機密，我就用馬賽克拉。
5.aria-hidden="true"是個什么屬性？
現代的輔助技術能夠識別並朗讀由 CSS 生成的內容和特定的 Unicode 字符。為了避免屏幕識讀設備抓取非故意的和可能產生混淆的輸出內容（尤其是當圖標純粹作為裝飾用途時），我們為這些圖標設置了 aria-hidden=“true” 屬性。通俗點說就是為屏幕識讀設備過濾無關信息。
附加題外話：
一篇文章會發現我寫了三種用法都是為了顯示這一個圖標：
回顧一下使用部分：
<!-- iconfont.css --> .icon-dianyingpiao:before { content: "\e8ae"; } <!-- icon.html -->
<span class="iconfont"></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字符集。字符集中的字符作為一個或多個字節存儲在計算機中。每個字節或字節序列代表一個給定的字符。
字符編碼是將字符集轉換為計算機可以接受的數字系統的數的規則