unicode-range特定字符自定義字體的方法是什么

本文小編為大家詳細(xì)介紹“unicode-range特定字符自定義字體的方法是什么”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“unicode-range特定字符自定義字體的方法是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

一、unicode-range是什么？

一看名稱，很多小伙伴可能認(rèn)為是個(gè)什么生僻的東西，實(shí)際上，這玩意只是名字怪怪的，功能關(guān)鍵時(shí)刻還是很管用的。

unicode-range是一個(gè)CSS屬性，一般和@font-face規(guī)則一起使用。

大家應(yīng)該不趕時(shí)間吧，那我們一點(diǎn)一點(diǎn)往下深入，現(xiàn)在很多網(wǎng)站會使用微軟雅黑字體，但是，微軟雅黑的名稱有點(diǎn)長：

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

如果這個(gè)字體不是全局的，每次用到都要寫一遍都很煩。雖然說，現(xiàn)在Sass, Less之類東西可以讓其成為變量，但是CSS的代碼量依舊沒有減小。其實(shí)，我們可以借助@font-face這種原生的特性來簡化我們的變成成本以及減少代碼量，如下：

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

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

.font {
    font-family: YH;
}

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

iMac等蘋果機(jī)子上好像默認(rèn)沒有微軟雅黑字體，我們希望Mac OS X系統(tǒng)上使用蘋方字體，window系統(tǒng)上雅黑字體，也是可以的，我們不妨命名把字體名命名為BASE（全大寫表示自定義），然后：

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

于是乎，我們的字體就更加智能了，要使用直接：

.font {
    font-family: BASE;
}

結(jié)果windows系統(tǒng)下：

OS X系統(tǒng)下：

大家若有興趣，也可以狠狠地點(diǎn)擊這里：雅黑和蘋方化身更精簡名稱demo

本來皆大歡喜，但是敏銳的設(shè)計(jì)師突然發(fā)現(xiàn)，這微軟雅黑字體的引號，前后長得都是一樣的，大段文章內(nèi)容中無所謂，但是如果出現(xiàn)在大大的slogon中，顯然，不是最好的表現(xiàn)，于是提出了這么一個(gè)需求，希望引號全部都是宋體，而其他字體依然是蘋方或者微軟雅黑。

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

1. 曉之以理動(dòng)之以情否決這個(gè)需求，但是，你也少了一個(gè)在設(shè)計(jì)師大顯身手的機(jī)會；

2. 引號外面套用個(gè)span標(biāo)簽之類，然后設(shè)置宋體。但是，如果我們的內(nèi)容是動(dòng)態(tài)的，啊哦，估計(jì)就麻煩了，就需要內(nèi)容輸出的時(shí)候匹配替換了。

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

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

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

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;
   }

   此時(shí)，原本的一個(gè)方向的引號就變得更加傳統(tǒng)和直白了（見下圖）：
   

   若想新眼所見，您可以狠狠地點(diǎn)擊這里：unicode-range控制特定字符使用特定字體demo

   這里，F(xiàn)irefox瀏覽器下有個(gè)大坑，我爬出來花了好一會兒，就是Firefox瀏覽器對字體的拼音名稱大小寫敏感，也就是local('simsun')Firefox會當(dāng)初瀏覽器默認(rèn)字體來處理，有些坑，大家需要注意下。

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

二、unicode-range的值和語法

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

語法如下，參考自MDN：

/*支持的值 */ unicode-range: U+26;               /* 單個(gè)字符編碼 */ unicode-range: U+0-7F; unicode-range: U+0025-00FF;        /* 字符編碼區(qū)間 */ unicode-range: U+4??;              /* 通配符區(qū)間 */ unicode-range: U+0025-00FF, U+4??; /* 多個(gè)值 */

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

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

于是，前端領(lǐng)域字符表示方式又多了一員：
1. HTML中字符輸出使用&#x配上charCode值；
2. 在JavaScript文件中為防止亂碼轉(zhuǎn)義，則是\u配上charCode值；
3. 而在CSS文件中，如CSS偽元素的content屬性，直接使用\配上charCode值。
4. unicode-range是U+配上charCode值。

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

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

對于我們中文用戶，最常用的有下面這些：

漢字：[0x4e00,0x9fa5]（或十進(jìn)制[19968,40869]）
數(shù)字：[0x30,0x39]（或十進(jìn)制[48, 57]）
小寫字母：[0x61,0x7a]（或十進(jìn)制[97, 122]）
大寫字母：[0x41,0x5a]（或十進(jìn)制[65, 90]）

關(guān)于中文漢字更詳盡的編碼，我特意整理了一個(gè)頁面，以及可以預(yù)覽對應(yīng)字符范圍的所有字符內(nèi)容。您可以狠狠地點(diǎn)擊這里：中文漢字unicode編碼范圍整理demo

截圖效果如下：

左側(cè)的漢字都是可以點(diǎn)擊的，然后，我又順便花時(shí)間做了個(gè)可以預(yù)覽unicode-range范圍字符內(nèi)容的頁面，例如unicode-range對應(yīng)字符顯示工具兼顯示基本漢字demo

地址后面的range=寫上對應(yīng)的unicode-range范圍內(nèi)容，就可以知道對應(yīng)的都是那些字符了，例如，上面語法那里出現(xiàn)過的U+0025-00FF，我們看看都是對應(yīng)哪些內(nèi)容，我們把url后面改成如下圖：

結(jié)果原來指的是這些字符：

某個(gè)具體的字符unicode值如何獲?。?/strong>
這就需要我之前在“使用　等空格實(shí)現(xiàn)最小成本中文對齊”一文中提到的小工具了，您可以狠狠地點(diǎn)擊這里：任意字符轉(zhuǎn)換成HTML識別格式工具頁面

例如：

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

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

我看到有部分前端小伙伴使用unicode-range的場景是這樣的，一段內(nèi)容，英文數(shù)字等使用某個(gè)字體，中文使用另外一個(gè)字體，于是，使用unicode-range弄了一段自定義編碼，看上去很酷，畢竟使用了很多人都不知道的unicode-range，實(shí)際上，這并不是unicode-range真正適合的應(yīng)用場景（雖然確實(shí)也實(shí)現(xiàn)了效果），為什么呢？

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

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

因?yàn)?，?jù)我所知，這些英文字體是沒有中文字符集映射的，也就是，英文字體實(shí)際上對中文是沒有任何作用的?？紤]到font-family的字體解析是從前往后依次的，所以，自然而然上面的代碼數(shù)字英文是Helvetica字體，中文是蘋方或微軟雅黑，完全不需要使用unicode-range做吃力不討好的事情。

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

在我看來，是對中文內(nèi)容中的某部分中文字符做特殊字體處理，或者是英文字體中部分字符做特殊字體處理，這個(gè)才是適合的。比方說，上面使用宋體引號的案例，因?yàn)槎际侵形淖煮w，因此，才有使用unicode-range的價(jià)值。

五、unicode-range的兼容性

我擦，caniuse打不開。

兼容性相關(guān)JSON數(shù)據(jù)參見這里。

MDN上顯示為：

基本上，IE9+瀏覽器開始支持，F(xiàn)irefox 44開始支持不錯(cuò)，至于Chrome和移動(dòng)端，大家自然可以愉快地玩耍?？偠灾?，兼容性還是很不錯(cuò)的，至少在實(shí)際項(xiàng)目中使用我覺得很OK啦。IE8什么的字體效果差點(diǎn)就差點(diǎn)，畢竟不是影響功能的CSS屬性。

讀到這里，這篇“unicode-range特定字符自定義字體的方法是什么”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。