CSS unicode-range特定字元使用font-face自定義字型

　　一、unicode-range是什麼？

　　一看名稱，很多小夥伴可能認為是個什麼生僻的東西，實際上，這玩意只是名字怪怪的，功能關鍵時刻還是很管用的。

　　unicode-range是一個CSS屬性，一般和@font-face規則一起使用。

　　大家應該不趕時間吧，那我們一點一點往下深入，現在很多網站會使用微軟雅黑字型，但是，微軟雅黑的名稱有點長：

.font {
    font-family: 'microsoft yahei';
}

　　如果這個字型不是全域性的，每次用到都要寫一遍都很煩。雖然說，現在Sass, Less之類東西可以讓其成為變數，但是CSS的程式碼量依舊沒有減小。其實，我們可以藉助@font-face這種原生的特性來簡化我們的變成成本以及減少程式碼量，如下：

@font-face {
  font-family: YH;
  src: local("microsoft yahei");
}

　　然後，接下來要使用微軟雅黑字型的字型，就不要使用那段長長的很有逼格的字串了，直接科科：

.font {
    font-family: YH;
}

　　字型就是微軟雅黑字型了，好記又好用，這才是@font-face真正的實力……的一部分。

　　iMac等蘋果機子上好像預設沒有微軟雅黑字型，我們希望Mac OS X系統上使用蘋方字型，window系統上雅黑字型，也是可以的，我們不妨命名把字型名命名為BASE（全大寫表示自定義），然後：

@font-face {
  font-family: BASE;
  src: local('PingFang SC'),
       local("Microsoft Yahei");
}

　　於是乎，我們的字型就更加智慧了，要使用直接：

.font {
    font-family: BASE;
}

　　結果windows系統下：

OS X系統下：

　　大家若有興趣，也可以狠狠地點選這裡：雅黑和蘋方化身更精簡名稱demo

　　本來皆大歡喜，但是敏銳的設計師突然發現，這微軟雅黑字型的引號，前後長得都是一樣的，大段文章內容中無所謂，但是如果出現在大大的slogon中，顯然，不是最好的表現，於是提出了這麼一個需求，希望引號全部都是宋體，而其他字型依然是蘋方或者微軟雅黑。

　　如果這種需求，我們可以有下面幾種做法：

　　1. 曉之以理動之以情否決這個需求，但是，你也少了一個在設計師大顯身手的機會；

　　2. 引號外面套用個span標籤之類，然後設定宋體。但是，如果我們的內容是動態的，啊哦，估計就麻煩了，就需要內容輸出的時候匹配替換了。

　　3. 使用字蛛這樣的中文字型生成工具，生成一個僅具有上引號和下引號的字型，假設font-family命名為quote，則如下CSS：

.font {
    font-family: quote, BASE;
}

　　但是宋體系統都有，這另外生成外加額外的請求都是成本啊。

　　4. 使用本文的unicode-range，也就是我們使用unicode-range指定就引號使用宋體。如下CSS程式碼：

@font-face {
  font-family: BASE;
  src: local('PingFang SC'),
       local("Microsoft Yahei");
}
@font-face {
  font-family: quote;
  src: local('SimSun');    
  unicode-range: U+201c, U+201d;
}
.font {
    font-family: quote, BASE;
}

　　此時，原本的一個方向的引號就變得更加傳統和直白了（見下圖）：

　　若想新眼所見，您可以狠狠地點選這裡：unicode-range控制特定字元使用特定字型demo

　　這裡，Firefox瀏覽器下有個大坑，我爬出來花了好一會兒，就是Firefox瀏覽器對字型的拼音名稱大小寫敏感，也就是local('simsun')Firefox會當初瀏覽器預設字型來處理，有些坑，大家需要注意下。

　　上面4種做法，明眼人都能看出來，unicode-range是成本最低同時效果最好的實現方式。不知諸位是不是對unicode-range開始有了興趣呢？

　　二、unicode-range的值和語法

　　unicode-range的值正如名稱所示，是unicode值，就是U+以及後面可以表示各種字元和文字的幾個數字或字母，初始值為：U+0-10FFFF，也就是所有字符集。

　　語法如下，參考自MDN：

/* 支援的值 */
unicode-range: U+26;               /* 單個字元編碼 */
unicode-range: U+0-7F;
unicode-range: U+0025-00FF;        /* 字元編碼區間 */
unicode-range: U+4??;              /* 萬用字元區間 */
unicode-range: U+0025-00FF, U+4??; /* 多個值 */

　　其中，U+4??有些小夥伴可能不知道什麼意思，?可以理解為佔位符，表示0-F的值，因此，U+4??表示從U+400到U+4FF。

　　我們掃一掃unicode-range的語法應該就知道其屬性值的組成了，就是U+跟上對應字元的charCode值。

　　於是，前端領域字元表示方式又多了一員：

　　1. HTML中字元輸出使用&#x配上charCode值；

　　2. 在JavaScript檔案中為防止亂碼轉義，則是\u配上charCode值；

　　3. 而在CSS檔案中，如CSS偽元素的content屬性，直接使用\配上charCode值。

　　4. unicode-range是U+配上charCode值。

　　那有哪些常用的unicode值範圍呢？以及如何獲得任意字元的unicode值呢？

　　三、unicode-range的常用unicode值及獲取

　　對於我們中文使用者，最常用的有下面這些：

　　漢字：[0x4e00,0x9fa5]（或十進位制[19968,40869]）

　　數字：[0x30,0x39]（或十進位制[48, 57]）

　　小寫字母：[0x61,0x7a]（或十進位制[97, 122]）

　　大寫字母：[0x41,0x5a]（或十進位制[65, 90]）

　　關於中文漢字更詳盡的編碼，我特意整理了一個頁面，以及可以預覽對應字元範圍的所有字元內容。您可以狠狠地點選這裡：中文漢字unicode編碼範圍整理demo

　　截圖效果如下：

　　左側的漢字都是可以點選的，然後，我又順便花時間做了個可以預覽unicode-range範圍字元內容的頁面，例如unicode-range對應字元顯示工具兼顯示基本漢字demo

　　地址後面的range=寫上對應的unicode-range範圍內容，就可以知道對應的都是那些字元了，例如，上面語法那裡出現過的U+0025-00FF，我們看看都是對應哪些內容，我們把url後面改成如下圖：

　　結果原來指的是這些字元：

　　某個具體的字元unicode值如何獲取？

　　這就需要我之前在“使用　等空格實現最小成本中文對齊”一文中提到的小工具了，您可以狠狠地點選這裡：任意字元轉換成HTML識別格式工具頁面

　　例如：

　　上面的a9就是我們需要的charCode值，&#x是在HTML中顯示字元實體用的，這裡不用管，然後套永在unicode-range屬性值中就是U+9aU+a9，一開始的宋體引號例子，我就是使用這個工具獲取到U+201c和U+201d的。

　　四、unicode-range適合使用的場景

　　我看到有部分前端小夥伴使用unicode-range的場景是這樣的，一段內容，英文數字等使用某個字型，中文使用另外一個字型，於是，使用unicode-range弄了一段自定義編碼，看上去很酷，畢竟使用了很多人都不知道的unicode-range，實際上，這並不是unicode-range真正適合的應用場景（雖然確實也實現了效果），為什麼呢？

　　比方說你希望數字英文是Helvetica字型，中文是蘋方或微軟雅黑，直接把英文字型放在前面就可以了！

.font {
    font-family: Helvetica, 'Pingfang SC', 'microsoft yahei';
}

　　因為，據我所知，這些英文字型是沒有中文字符集對映的，也就是，英文字型實際上對中文是沒有任何作用的。考慮到font-family的字型解析是從前往後依次的，所以，自然而然上面的程式碼數字英文是Helvetica字型，中文是蘋方或微軟雅黑，完全不需要使用unicode-range做吃力不討好的事情。

　　那unicode-range適合使用的場景究竟是什麼呢？

　　在我看來，是對中文內容中的某部分中文字元做特殊字型處理，或者是英文字型中部分字元做特殊字型處理，這個才是適合的。比方說，上面使用宋體引號的案例，因為都是中文字型，因此，才有使用unicode-range的價值。

　　五、unicode-range的相容性

　　我擦，caniuse打不開。

　　相容性相關JSON資料參見這裡。

　　MDN上顯示為：

　　基本上，IE9+瀏覽器開始支援，Firefox 44開始支援不錯，至於Chrome和移動端，大家自然可以愉快地玩耍。總而言之，相容性還是很不錯的，至少在實際專案中使用我覺得很OK啦。IE8什麼的字型效果差點就差點，畢竟不是影響功能的CSS屬性。

　　六、結語

　　在處理unicode-range的時候，突然感嘆，要是@font-face規則中可以定義文字的預設顏色就好了，這樣，我們要在前端實現搜尋高亮效果，根本就不需要對HTML做任何事情，直接把對於的搜尋內容轉換成unicode編碼，使用unicode-range匹配，自動變得，那就厲害了，可惜不支援。畢竟僅僅是字型匹配似乎不是很明顯。