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匹配，自動變得，那就厲害了，可惜不支援。畢竟只是字體匹配似乎不是很明顯。

以上是CSS unicode-range特定字元使用font-face自訂字體的詳細內容。更多資訊請關注PHP中文網其他相關文章！