为什么这个 TTF 字体在我的浏览器中不起作用？答案

【问题标题】：Why won't this TTF font work in my browser?为什么这个 TTF 字体在我的浏览器中不起作用？
【发布时间】：2017-11-21 04:52:33
【问题描述】：

我下载了一种名为“Clunk”的 TTF 字体，并尝试将其应用于某些文本。

这是我正在使用的代码：

<html>
<head>
<style>
@font-face {
    font-family: clunk;
    src: url('clunk.ttf');
}

h1 {
    font-family: clunk;
}
</style>
</head>
<body>
<h1 id="logo">Test</h1>
</body>
</html>

这似乎不起作用，Chrome 给了我两个错误：

Failed to decode downloaded font: (path to the file)
OTS parsing error: incorrect entrySelector for table directory

在 Firefox 中，出现以下错误：

downloadable font: bad search range (font-family: "clunk" style:normal weight:normal stretch:normal src index:0) source: (path to the file)  test.html:4:12

downloadable font: incorrect entrySelector for table directory (font-family: "clunk" style:normal weight:normal stretch:normal src index:0) source: (path to the file)  test.html:4:12

downloadable font: rejected by sanitizer (font-family: "clunk" style:normal weight:normal stretch:normal src index:0) source: (path to the file)

我在 Google 上搜索了这些错误，但这个问题似乎非常广泛，而且很难找到最少的示例。在这种简单情况下会导致错误的原因是什么？

【问题讨论】：

你在用git吗？

标签： css fonts font-face webfonts

【解决方案1】：

将 Font-family: clunk 更改为 font-family:"clunk" 然后验证你的路径

【讨论】：

【解决方案2】：

这可能会对你有所帮助。

https://everythingfonts.com/ttf-to-woff

基本上你需要做的是：

-将 .ttf 转换为 .woff

我不知道为什么转换它有效。但它总是对我有用。另外……删除缓存或更改文件名。

希望对你有帮助

【讨论】：

FontForge 完全解决了我的问题，但出于好奇我尝试了您的网站。它修复了控制台错误并显示了字体，但它搞砸了字体中的一个字母。这是一个不错的备份选项，但 FontForge 做得更好，我能够保留 TTF 文件类型。
如果我发给你的转换器没有转换成完美的，就去看看其他的字体转换器。有些比其他更好。您的浏览器、代码或思维没有问题。有时您拥有的字体不适合浏览器。但是一旦你转换它，BAM……它就可以工作了。

【解决方案3】：

我发现 this answer 从 2009 年开始建议使用 FontForge 重建字体。我试过了，它解决了问题，所以它似乎是字体本身而不是代码的问题。

在这种特殊情况下，字体中的字母是“极值缺失点”，FontForge 只需单击一下即可解决。

【讨论】：

我有一种字体，其中有格鲁吉亚字符。在 ms 字中，格鲁吉亚字符正确显示，当我在网页中使用 css @font-face 指令嵌入我的字体时，格鲁吉亚字符不会出现。使用 fontforge 修复“极值缺失点”并不能解决问题。你能帮我找出问题吗？

【解决方案4】：

检查您的路径，最佳做法是始终使用相对路径（例如：）

 src: url('fonts/clunk.ttf') format('truetype');

检查头：Access-Control-Allow-Origin

【讨论】：

将 src 更改为您发布的内容并没有改变任何内容。它找到文件就好了，但它似乎不喜欢格式或其他东西，即使应该支持 TTF。
你给了正确的标题吗？

【解决方案5】：

转到：

http://yourwebsite/clunk.ttf

如果无法下载（如第一个错误所述），那么您的文件位置不正确。您可能需要设置一个绝对路径，例如：

http://yourwebsite/somesubpath/clunk.ttf

或者

/somesubpath/clunk.ttf

【讨论】：

【解决方案6】：

试试这个

src: url('/clunk.ttf');

【讨论】：

如果你的路径好像是/font/clunk.ttf，你的src应该是这样的src：url('/font/clunk.ttf');