說起在網(wǎng)頁中引入字體文件，首先不得不提一個大多數(shù)前端至少用過或者聽過的庫Font Awesome。使用過這個庫的都知道，只要引入一個 css 文件，然后通過給元素賦予指定的類，就可以展示出一個對應(yīng)的圖標(biāo)，而且這個圖標(biāo)能使用 css 樣式控制其表現(xiàn)，比傳統(tǒng)的使用圖片作為圖標(biāo)好太多了。

Font Awesome 是一種網(wǎng)頁中使用的矢量字體圖標(biāo)解決方案，得益于 CSS3 中的 CSS Fonts Module Level 3 特性支持。

發(fā)現(xiàn)疑問

今天無意發(fā)現(xiàn) Font Awesome 更新了，升級到 5.x 了之后多了一種 svg with js 的使用方式，嘗試了下和 Element-ui 結(jié)合使用，發(fā)現(xiàn)這條路子行不通（因為使用這種方式的時候 font awesome 會把圖標(biāo)元素的載體元素轉(zhuǎn)換成 svg 標(biāo)簽，從到導(dǎo)致了沒法動態(tài)改變圖標(biāo)的問題，如果沒有動態(tài)改變圖標(biāo)的需求可以使用這種方式）。

基于以上原因，所以還是使用引入 css 的老方法。然鵝，font5 給圖標(biāo)增加了分類，分為 solid 和 regular，即同一個圖標(biāo)可能會有兩種樣式，如下：

<iframe height='166' scrolling='no' title='dJYdxZ' src='//codepen.io/Yuliang-Lee/embed/dJYdxZ/?height=166&theme-id=dark&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a >dJYdxZ</a> by xlaoyu (<a >@Yuliang-Lee</a>) on <a >CodePen</a>.
</iframe>

此時打開控制面板查看兩個元素的 css，可以??的發(fā)現(xiàn)使用的字體和內(nèi)容編碼一模一樣

dom-css-content

那么問題來了，為什么圖標(biāo)會不一樣呢？

事出必有因

我們首先打開引入這兩種圖標(biāo)的 css 的源碼看看

/* regular.css */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  src: url('#{$fa-font-path}/fa-regular-400.eot');
  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
}

/* solid.css */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: url('#{$fa-font-path}/fa-solid-900.eot');
  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
}

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

可以看出 font-face 中的 font-family 確實一模一樣，即可以表示當(dāng)有元素使用到這個字體的時候，瀏覽器有能力識別出需要用的是哪個'font'。

google 之后在 StackOverflow 找到了一個相關(guān)的問答（Stack Overflow 大法好）。How to use font-family with same name?

咳咳。。敲黑板，劃重點??

When you describe a font with a name, imagine (in the most abstract of the explanations) that you create an object; but, when you create multiple font-rules with the same name, imagine you create an array. Now, to access and array, you have to use its index. The index here is the font-weight. So, to access different weights (technically, fonts), you use the weight. Continuing the analogy of the array above, you have to manually define the index, it's not automatically done.

原來乳此！如果出現(xiàn)了同樣的字體，就是用 font-weight 這個屬性來判斷要用哪一個！這時候再回頭去看上面的 font awesome的css 定義，可以看出確實兩個字體使用了不同的 font-weight 。一切都'水落石出'了。

不能聽風(fēng)就是雨

雖然上面回答說得很有道理，并且也符合我們觀察到的現(xiàn)象，但是我們不能聽風(fēng)就是雨是不？！下定論要有證據(jù)！既然別人能說出來，必然我們能找到對應(yīng)這塊的規(guī)范標(biāo)準(zhǔn)。

果不其然，在另外一個問答中看到，font-weight 和 font-style 屬性都可以影響字體選擇行為，并且出現(xiàn)了引領(lǐng)我們走向'真理'的評論：CSS Fonts Module。作為描述字體的屬性有三個

• font-weight
• font-style
• font-stretch

These descriptors define the characteristics of a font face and are used in the process of matching styles to specific faces. For a font family defined with several @font-face rules, user agents can either download all faces in the family or use these descriptors to selectively download font faces that match actual styles used in document. The values for these descriptors are the same as those for the corresponding font properties except that relative keywords are not allowed, ‘bolder’ and ‘lighter’. If these descriptors are omitted, initial values are assumed.

目前為止可以總結(jié)出幾點：

1. 可以使用 @font-face 引入外部字字體
2. 使用 @font-face 引入相同名字的字體，可以通過設(shè)置 font-weight、font-style、font-stretch 屬性控制瀏覽器根據(jù)使用樣式命中不同的字體文件
3. font-weight 設(shè)置為 normal 的定義必須放在最前面，經(jīng)過在 chrome 上測試，并沒有這個要求。但是在 Stack Overflow 上很多人都提出有這個限制，可能是舊瀏覽器的行為，需要注意一下兼容性。

參考連接

1. How to use font-family with same name?
   
2. How to add multiple font files for the same font?
   
3. Style Linking
4. CSS Fonts Module Level 3
5. element2-fontawesome5

版權(quán)聲明：原創(chuàng)文章，如需轉(zhuǎn)載，請注明出處“本文首發(fā)于xlaoyu.info”