Question

我下载了一个名为＆＃34; Clunk＆＃34;我试图将它应用到某些文本中。

以下是我使用的代码：

<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

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

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

Answer 2

这可能会对你有帮助。

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

基本上你需要做的是：

- 将.ttf转换为.woff

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

我希望这会有所帮助

Answer 3

试试这个

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

Answer 4

转到：

http://yourwebsite/clunk.ttf

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

http://yourwebsite/somesubpath/clunk.ttf

或

/somesubpath/clunk.ttf

Answer 5

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

）

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

检查标题：Access-Control-Allow-Origin

Answer 6

将Font-family：clunk更改为font-family：“ clunk” 然后验证您的路径

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

6 个答案: