前端工程師-字型圖示-Unicode
前言
由於字型圖示的問題，引發了我對編碼探究的想法
1.字符集與字元編碼（計算機）
這個概念一定要先明確：其實網上已經有一大堆的解釋了，大家只要複製“字符集與字元編碼”到百度會搜出一籮筐，我這裡使用我自己的理解來解釋，如果有不對的地方誠邀指正，不勝感激！
字符集：顧名思義就是一個字元的二進位制程式碼的集合，這些字元是什麼？就是我們在現實中看到的各種符號（包括文字，阿拉伯字元，（）*%￥#%&..... ），他是一張大大的表，裡面記錄著每個字元與他對應的二進位制程式碼；
字元編碼：編碼是個動詞，就是把這些二進位制翻譯成計算機認識的二進位制
解碼：相對編碼的就是解碼了，解碼就是把二進位制翻譯成我們可以理解的樣子，比如Unicode字符集中，將U+0000 = space（鍵盤上的空格）；
------------------------------------------------------------
奇怪，為什麼有了字符集不是二進位制程式碼集合嗎，計算機不是存的就是二進位制嗎，為什麼還要編碼這個工具呢？
8bit(位) = 1byte(位元組)
我們的計算機處理二進位制的時候，如何得知把幾位視為一個字元呢，是4位還是8位，還是3位？這個就需要硬體與軟體系統做一個約定了，這個約定就是編碼方式，這個編碼方式就可以告訴計算機，我有一段二進位制的編碼，這段二進位制編碼，每3位算一個字元，計算機就知道，奧，我明白了
-----------------------------------------------------------
目前存在的字符集與字元編碼有：ASCII字符集&編碼，GBXXXX字符集&編碼，BIG5字符集&編碼，Unicode字符集&UTF編碼
2.Unicode字符集
Unicode編碼幾乎囊括了目前我們所有的常用字元，數量已經達到了10萬多，它為我們的常用字元都分配了一個編號（在Unicode中稱為（碼點））之前的定義說過，字符集是一堆字元與他的對應的碼點（二進位制碼）的集合，那麼Unicode是如何為這些字元分配編號（碼點）的呢，是像我們平時的列表一樣，從第一行開始，第N行結束，還是使用其他方式呢？
此處引用阮老師的圖片
Unicode是雙位元組編碼（1個byte = 8bit）它的基本字元是用 00000000 00000000 - 11111111 11111111 之間表示的，Unicode把這個範圍稱為‘基本平面’一共能包含2^16=65536個字元，基本包含了我們所有的常用字元。關於輔助平面可以看一下
（為什麼出現U+0000 - U+FFFF 呢，因為上面的一大坨0，1太長了，所以用16進位制來表示了。）
2.UTF-8字元編碼
（Unicode Transformation Format -8/16/32 bit，utf-n，說明此編碼方式就會以n約定為一個字元，此處我只說utf-8，其他的只是計算方式不同，由於我本人主要是為了瞭解到字符集與字元編碼的大概，並不打算深究這個知識點，所以只記錄最常用的)
之前的定義說過，字元編碼是一個約定，告訴計算機，我有一段二進位制的編碼，這段二進位制編碼，每n位算一個字元，UTF-8做的就是這樣一件事：
它約定如下：
1.如果字元需要用1個位元組來表示，UTF-8就以0開頭（1個位元組的字元完美包含了ascii字符集中的字元，ascii字符集只有128個字元<2^8=256,所以Unicode的0-127的字元與ASCii碼可以完全相同）
2.如果字元需要用n個位元組來表示，UTF-8就約定以第一個位元組前面n位為1，第n+1位為0，剩餘的n - 1 個位元組的前兩位都設為 10。
（U+與0x都表示後面是16進位制）
| Unicode編碼(十六進位制) | UTF-8 位元組流(二進位制) | UTF-8 位元組 |
| U+0000 - U+007F（0x0000 - 0x007F） | 0xxxxxxx | 1 |
| U+0080 - U+07FF（0x0080 - 0x07FF） | 110xxxxx 10xxxxxx | 2 |
| U+0800 - U+FFFF（0x0800 - 0xFFFF） | 1110xxxx 10xxxxxx 10xxxxxx | 3 |
| U+010000 - U+1FFFFF（0x010000 - 0x10FFFF） | 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx（21位用來表示字元） | 4 |
3.html/css/js如何使用字符集與字元編碼
使用Unicode字符集時，首先需要設定字元編碼方式：
<!-- html中 --> <!DOCTYPE html> <html lang="en"> <head> <!--HTTP HEADER--> < meta http-equiv = "Content-Type" content = " text / html; charset = utf-8" > <!-- HTML4-style meta --> < meta http-equiv ="Content-Type" content = "text / html;charset = "utf-8" > <!-- 短HTML5元（推薦）--> < meta charset = "utf-8" > <title>Title</title> <link rel="stylesheet" type="text/css" href="font_ztktsv718x/iconfont.css"> </head>
// css中，一般我們在html中指定了編碼方式後，就不用在css中去指定了
@charset "UTF-8"
JS 引擎可以選擇使用 UCS-2 或者 UTF-16，為什麼不用UTF-8歷史原因，我把阮老師的文章截圖放在這裡，可以供大家瞭解：
由於JavaScript只能處理UCS-2編碼，造成所有字元在這門語言中都是2個位元組，如果是4個位元組的字元，會當作兩個雙位元組的字元處理。JavaScript的字元函式都受到這一點的影響，無法返回正確結果。
由於Ucs-2與Unicod合併了，但是基本平main的字元還是沿用了UCS-2，所以這裡我們說JavaScript只能處理UCS-2編碼。
// js中，用\u+16進位制編碼使用Unicode字元，js引擎是用\u進行轉義的
ctx.fillText('\ue8ae', 10, 50);
| html |
&#x + 16進位制編碼 + ； |
|
&# + 10進位制編碼 + ； |
|
| css |
\ + 16進位制編碼 |
| js |
\u + 4位16進位制編碼 |
|
\x + 2位16進位制編碼 |
4.小結
最實用的應該就是上面這張表了。
5.感悟
寫完以後我自己其實有點懵，我研究了這些是為了什麼，是為了使用嗎，但是後來我回顧我所寫過的東西，包括我查的資料以及閱讀過的文章，我發現瞭解知識的過程是為了走的更遠，有點雞湯，但是我通過自我問答的形式確實鞏固了一些基礎，並且學習到了一些知識，感覺到自己的渺小，任重道遠，珍惜流逝的時光。