css引入外部特殊字体，出现不起作用的原因

根据项目需求，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