例子

@font-face {
    font-family: 'example';
    src: url(example.ttf);
    font-style: normal;
    font-weight: normal;
    unicode-range: U+0025-00FF;
    font-variant: small-caps;
    font-stretch: expanded;
    font-feature-settings："liga1" on;
}
.font {
    font-family: example;
}

font-family

@font-face {
    font-family: '$';
    src: local("Microsoft Yahei");
}

• 這裡的font-family可以看成是一個字型變數，名稱可以非常隨意；
• 對普通HTML元素，你設定其font-family屬性值為’$’，則其字體表現就變成了“微軟雅黑”（如果本地有這個字型）。
• 使用這些稀奇古怪的字元或者有空格的時候，一定要加引號。
• 雖然說自己變數名可以很隨意，但是有一類名稱，不能隨便設定，就是原本系統就有的字型名稱

src

@font-face {
    font-family: 'YH'
 
;
    src: local("Microsoft Yahei");
}
@font-face {
    font-family: 'T';
    src: url("FZCYST.ttf");
}
@font-face {
    font-family: FZCYS;
    src: local("FZYaSongS-B-GB"), 
         url("FZCYS.woff2"),  
         url("FZCYS.woff"),
         url("FZCYS.ttf");
}

• src表示呼叫字型檔案，可以是本地字型檔案（IE9+支援），也可以是線上地址（可能有跨域限制）。
• 儘量都先用local,後加url.

body {
    font-family: PingFangSC-Regular,HelveticaNeue-Light,'Helvetica Neue Light','Microsoft YaHei',sans-serif;
}
.xxxx {
    font-family: PingFangSC-Regular,HelveticaNeue-Light,'Helvetica Neue Light','Microsoft YaHei',sans-serif;
}

優化後：

@font-face {
     font-family: BASE;
     src: local("HelveticaNeue-Light"), local("Helvetica Neue Light"),  local("PingFang SC"), local("Microsoft YaHei"), local(sans-serif);
}
body {
    font-family: BASE;
}
.xxxx {
    font-family: BASE;
}

font-style

• @font face規則中的font-style和font-weight類似，都是用來設定對應字型樣式或自重下該使用什麼字型。
• 因為有些字型可能會有專門的斜體字，注意這個斜體字，並不是讓文字的形狀傾斜，而是專門設計的傾斜的字型，很多細節會跟物理上的請求不一樣。於是，我在CSS程式碼中使用font-style:italic的時候，就會呼叫這個對應字型。

<i class="stupid">“笨蛋”、笨蛋、大笨蛋</i>
<p class="stupid">“沒錯”，我就是笨蛋、大笨蛋</p>

@font-face {
    font-family: 'T';
    src: url("FZCYST.ttf");
    font-style: italic;
}
@font-face {
    font-family: 'T';
    src: url("FZST.ttf");
    font-style: normal;
}
.stupid {
    font-family: T;
    font-size: 20px;
}

font-weight

• font-weight和font-style類似，不過是定義了不同字重使用不同字型。
  html:

<ul>
  <li class="hy-40s">漢儀旗黑40s</li>
  <li class="hy-50s">漢儀旗黑50s</li>
  <li class="hy-60s">漢儀旗黑60s</li>
</ul>

@font-face {
  font-family: 'QH';
  font-weight: 400;
  src: local('HYQihei 40S');
}
@font-face {
  font-family: 'QH';
  font-weight: 500;
  src: local('HYQihei 50S');
}
@font-face {
  font-family: 'QH';
  font-weight: 600;
  src: local('HYQihei 60S');
}
.hy-40s,
.hy-50s,
.hy-60s {
  font-family: 'QH';
}
.hy-40s {
  font-weight: 400;
}
.hy-50s {
  font-weight: 500;
}
.hy-60s {
  font-weight: 600;
}

unicode-range

unicode-range的作用是可以讓特定的字元或者字元片段使用特定的字型。

@font-face {
    font-family: 'YH';
    src: local("Microsoft Yahei");
}
.stupid {
    font-family: YH;
    font-size: 20px;
}   

@font-face {
    font-family: 'YH';
    src: local("Microsoft Yahei");
}
@font-face {
    font-family: quote;
    src: url('simsun.ttf');
    unicode-range: U+201c, U+201d;
}
.stupid {
    font-family: quote,YH;
    font-size: 20px;
}   

Can i use

https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face
http://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/
https://caniuse.com/#search=font-face