樣式的聲明和使用。
@font-face {
font-family: "myFont";
src: url("myFont.ttf") format("truetype");
}
h2 {
font-family: "myFont";
}
感覺沒有啥好介紹的，看參閱文章后就能明白了。
這里需要說的就是 font-weight 和 font-style 這2個屬性在@font-face規則里使用。
font-weight 這個屬性顧名思義，就是對字體的加粗的。可以理解為應用這個字體的時候，會看下這個條件是否滿足，如果滿足則會應用這個字體樣式信息。至於這個條件是如何滿足，看下 font-weight 這個信息資料就明白了。這個屬性會向上和向下取值，取值區間為 100 - 900；回退機制如下：
當提供的字體有，細、正常、粗 時才需要定義，需要為每個不同粗細的字體文件單獨加上規則，規則的名稱可以一致，這樣就會在同一個規則名稱中，按照font-weight定義的值(不滿足則會進行回退值機制使其滿足)進行匹配並使用字體文件。
font-style屬性同樣的道理，只不過這個是定義 傾斜 字體的規則屬性。
示例為：
@font-face {
font-family: '字體族名稱，自定義的';
src: url('字體文件的url') format("字體文件代表的類型");
font-weight: normal;
font-style: normal;
}
/* 上面是示例 */
@font-face {
font-family: 'ABC';
src: url('ABC-BLOD.ttf') format("truetype");
font-weight: blod;
font-style: normal;
}
@font-face {
font-family: 'ABC';
src: url('ABC-normal.ttf') format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'ABC';
src: url('ABC-細.ttf') format("truetype");
font-weight: 100; /* 如果這個屬性不支持枚舉屬性值的話，也可以定義數值，范圍是100-900，在使用時會使用回退機制來匹配的 */
font-style: normal; /* 這個屬性就是定義 傾斜 的屬性了，就不單獨說了 */
}
/* font-weight 和 font-style 屬性定義的值是AND的關系，不過我沒有試過，應該就是如此的 */
/* 然后使用的話如下 */
h2 {
font-family: "ABC"
/* 可定義 font-weight 和 font-style 屬性進行匹配指定的字體文件
如：定義 font-weight: 200 ，這個肯定是匹配 ABC-細.ttf 這個字體了。其他寬度同樣道理。
*/
}
這里列舉下常用的字體格式：
| ttf | truetype |
| otf | opentype |
| woff2 | woff2 |
| woff | woff |
| eot | embedded-opentype |
| svg | svg |
參閱：
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts
https://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/