說起在網頁中引入字體文件，首先不得不提一個大多數(shù)前端至少用過或者聽過的庫Font Awesome。使用過這個庫的都知道，只要引入一個 css 文件，然后通過給元素賦予指定的類，就可以展示出一個對應的圖標，而且這個圖標能使用 css 樣式控制其表現(xiàn)，比傳統(tǒng)的使用圖片作為圖標好太多了。
Font Awesome 是一種網頁中使用的矢量字體圖標解決方案，得益于 CSS3 中的 CSS Fonts Module Level 3 特性支持。
發(fā)現(xiàn)疑問
今天無意發(fā)現(xiàn) Font Awesome 更新了，升級到 5.x 了之后多了一種 svg with js 的使用方式，嘗試了下和 Element-ui 結合使用，發(fā)現(xiàn)這條路子行不通（因為使用這種方式的時候 font awesome 會把圖標元素的載體元素轉換成 svg 標簽，從到導致了沒法動態(tài)改變圖標的問題，如果沒有動態(tài)改變圖標的需求可以使用這種方式）。
基于以上原因，所以還是使用引入 css 的老方法。然鵝，font5 給圖標增加了分類，分為 solid 和 regular，即同一個圖標可能會有兩種樣式，如下：
<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)使用的字體和內容編碼一模一樣
那么問題來了，為什么圖標會不一樣呢？
事出必有因
我們首先打開引入這兩種圖標的 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 確實一模一樣，即可以表示當有元素使用到這個字體的時候，瀏覽器有能力識別出需要用的是哪個'font'。
google 之后在 StackOverflow 找到了一個相關的問答（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 。一切都'水落石出'了。
不能聽風就是雨
雖然上面回答說得很有道理，并且也符合我們觀察到的現(xiàn)象，但是我們不能聽風就是雨是不？！下定論要有證據(jù)！既然別人能說出來，必然我們能找到對應這塊的規(guī)范標準。
果不其然，在另外一個問答中看到，font-weight 和 font-style 屬性都可以影響字體選擇行為，并且出現(xiàn)了引領我們走向'真理'的評論：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.
目前為止可以總結出幾點：
- 可以使用
@font-face引入外部字字體 - 使用
@font-face引入相同名字的字體，可以通過設置font-weight、font-style、font-stretch屬性控制瀏覽器根據(jù)使用樣式命中不同的字體文件 -
font-weight設置為normal的定義必須放在最前面
參考連接
- How to use font-family with same name?
- How to add multiple font files for the same font?
- Style Linking
- CSS Fonts Module Level 3
- element2-fontawesome5
版權聲明：原創(chuàng)文章，如需轉載，請注明出處“本文首發(fā)于xlaoyu.info”
