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

【问题标题】：Why aren't my fonts working?为什么我的字体不起作用？
【发布时间】：2013-08-29 05:19:54
【问题描述】：

我的字体适用于 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');
}

here's the website I'm working on

【问题讨论】：

请在受信任的服务（例如 jsfiddle）上创建问题的简化测试用例。我不相信随机网站的链接。
Firefox 中的 CSS 调试工具会告诉你你需要知道的一切
嗯，路径是不是有点奇怪" url("./fonts" 不应该是" url("../fonts" 吗？
./ 表示当前目录。它可能像您怀疑的那样是一个错字，或者只是url("fonts... 的简写。无论如何，这在查看控制台时会很明显 - 你会看到“找不到文件”或类似的东西。

标签： html css font-face

【解决方案1】：

试试这个，如果不起作用，我会将所有源放在一行中，如果不起作用，则删除格式属性。（下面的修复在 .svg 之后添加了一个逗号，这是所有 3 个@font-face 的问题）。

  @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');
    }

【讨论】：

【解决方案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")

【讨论】：

我不敢相信我没有注意到这一点。谢谢，它现在在所有浏览器上都可以正常工作
@Vector ./ 表示“从当前文件夹开始”（例如，fonts/ 和 ./fonts/ 相同）。它与 / 不同，因为它指向“从域根目录开始”，而不是 ../，后者是“当前文件夹上方的一个文件夹”