樣式的宣告和使用。

@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定義的值(不滿足則會進行回退值機制使其滿足)進行匹配並使用字型檔案。

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 這個字型了。其他寬度同樣道理。
     
     */
}

 

這裡列舉下常用的字型格式：

參閱：

 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/

Web安全字型