CSS字体不适用于ttf

我正在使用@font-face，如下所示：

@font-face {
    font-family: DINPro;
    font-weight: bold;
    src: url(../res/fonts/DINPro-Bold.otf) format("opentype");
}
@font-face {
    font-family: DINPro;
    src: url(../res/fonts/DINPro-Regular.otf) format("opentype");
}
@font-face {
    font-family: DFLiHei;
    src: url(../res/fonts/DFLiHei-Regular.ttf) format('truetype');
}
h1{
    font-family: DFLiHei !important;
}

但不起作用。 我的文件夹结构可能是：

/index.html
/css/style.css
/res/fonts/DINPro-Bold.otf
/res/fonts/DINPro-Regular.otf
/res/fonts/DFLiHei-Regular.ttf

因此，我认为错误的目录不是我的问题。 而且，不仅在特殊浏览器上失败，在chrome和mobile上也失败了。

---

有什么想法吗？

将

ttf

转换成

woff

格式

---

它将在所有浏览器中工作

将

ttf

转换为

woff

格式

---

它将在所有浏览器中工作

尝试删除第二个字体系列，或删除前两个字体系列。为了测试可能的重复，请尝试删除第二个字体系列，或第一个字体系列中的两个。只是为了测试可能的重复

@font-face {
    font-family: DFLiHei;
    src: url(../res/fonts/DFLiHei-Regular.woff) format('woff');
}