为什么我的字体不起作用？

Question

我的字体可以在chrome，opera和safari上使用，但不能在ie或Firefox上使用。 即使阅读了其他有关@ font-face的问题，我仍然无法理解。

@font-face {
font-family: "TikalSansBlack";
src: url("./fonts/TikalSansBlack.eot?");
src: url("./fonts/TikalSansBlack.woff") format("woff"),
    url("./fonts/TikalSansBlack.ttf")  format("truetype"),
    url("./fonts/TikalSansBlack.svg") format("svg")
    url("./fonts/TikalSansBlack.otf") format("opentype");
}

@font-face {
    font-family: 'TikalSansMedium';
    src: url('./fonts/TikalSansMedium.eot?');
    src: url('./fonts/TikalSansMedium.woff') format('woff'),
        url('./fonts/TikalSansMedium.ttf')  format('truetype'),
        url('./fonts/TikalSansMedium.svg') format('svg')
        url('./fonts/TikalSansMedium.otf') format('opentype');
}

@font-face {
    font-family: 'TikalSansThin';
    src: url('./fonts/TikalSansThin.eot?');
    src: url('./fonts/TikalSansThin.woff') format('woff'),
        url('./fonts/TikalSansThin.ttf')  format('truetype'),
        url('./fonts/TikalSansThin.svg') format('svg')
        url('./fonts/TikalSansThin.otf') format('opentype');
}

这是我正在工作的网站

Answer 1

尝试一下，如果那行不通，我会将所有源代码放在一行上，如果那行不通，则删除format属性。 （下面的修复程序在.svg之后添加了一个逗号，这是@ font-face的全部3个问题）。

  @font-face {
        font-family: 'TikalSansThin';
        src: url('./fonts/TikalSansThin.eot?');
        src: url('./fonts/TikalSansThin.woff') format('woff'),
            url('./fonts/TikalSansThin.ttf')  format('truetype'),
            url('./fonts/TikalSansThin.svg') format('svg'),
            url('./fonts/TikalSansThin.otf') format('opentype');
    }

Answer 2

您在每种字体的最后一个字母上都缺少逗号

@font-face {
font-family: "TikalSansBlack";
src: url("./fonts/TikalSansBlack.eot?");
src: url("./fonts/TikalSansBlack.woff") format("woff"),
    url("./fonts/TikalSansBlack.ttf")  format("truetype"),
    url("./fonts/TikalSansBlack.svg") format("svg"),  <<== put comma here
    url("./fonts/TikalSansBlack.otf") format("opentype");
}

我也将担心您的文件路径。 如果想升级，则需要两个. 不是一个。 也许这就是整个过程所需要的

 url("../fonts/TikalSansBlack.otf")