为什么这个 TTF 字体不能在我的浏览器中使用？

Question

我下载了一种名为 "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 搜索了这些错误，但这个问题似乎非常广泛，很难找到最少的例子。在这种简单的情况下会导致错误的原因是什么？

Answer 1

试试这个

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

Answer 2

转到：

http://yourwebsite/clunk.ttf

如果无法下载（如第一个错误状态），则说明您的文件位置不正确。您可能必须设置一个绝对路径，例如：

http://yourwebsite/somesubpath/clunk.ttf

或

/somesubpath/clunk.ttf

Answer 3

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

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

检查header：Access-Control-Allow-Origin

Answer 4

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

在这种特殊情况下，字体中的字母是 "missing points at extrema"，FontForge 只需单击一下就可以解决这个问题。

Answer 5

这可能对您有所帮助。

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

基本上你需要做的是：

-将 .ttf 转换为 .woff

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

希望对您有所帮助

Answer 6

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

为什么这个 TTF 字体不能在我的浏览器中使用？

Why won't this TTF font work in my browser?

css

fonts

font-face

webfonts