CSS 字体不适用于 ttf

Question

我是这样使用@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 和移动设备中也会失败。有什么想法吗？

Answer 1

将ttf转换为woff格式

Try this

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

它适用于所有浏览器

CSS 字体不适用于 ttf

CSS font-face not working for ttf

css

font-face