根據專案需求，UI設計特殊字型，前端根據UI給的特殊字型，引入到自己的專案中，但是出現了引入不生效的情況，網上搜索也沒有找到原因，左思右想發現問題，我們在引入的時候需要注意以下幾點，這是我出現的問題
1.引入幾個就需要用幾個@font-face 如下：

@font-face {
    font-family: 'HYChangLiSongKeBen';
    src: url("../font/my-font.ttf") format('truetype');
    font-weight:  normal;
    opacity: 1;
}
@font-face {
    font-family: "Source Han Serif CN bold";
    src:url("../font/SourceHanSerifCN-Bold.ttf") format('truetype');
        url("../font/sourcehanserifcn-bold-webfont.woff") format('woff')；
        url("../font/sourcehanserifcn-bold-webfont.svg") format('svg')；
}
 

2.引入的路徑需要正確

3.引入的字尾名為.ttf的字型的format()不是ttf，而是 truetype

@font-face {
    font-family: 'HYChangLiSongKeBen';
    src: url("../font/my-font.ttf") format('truetype');
    font-weight:  normal;
    opacity: 1;
}
.content-article .content-txt {
    font-size: 0.32rem;
    font-family: HYChangLiSongKeBen;
    font-weight: normal;
    font-style: normal;
}
 

註釋：

獲取要使用字型的三種檔案格式，確保能在主流瀏覽器中都能正常顯示該字型。

.TTF或.OTF，適用於Firefox 3.5、Safari、Opera

.EOT，適用於Internet Explorer 4.0+

.SVG，適用於Chrome、IPhone