可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I downloaded a TTF font called "Clunk" and I'm trying to apply it to some text.

Here's the code I'm using:

<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>

This doesn't seem to work and Chrome is giving me two errors:

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

In Firefox, these are the errors that appear:

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)

I Googled around for those errors but this problem seems to be very broad and it was hard to find minimal examples. What would be causing the error in this simple situation?

回答1:

I found this answer from 2009 that suggested rebuilding the font with FontForge. I tried that out and it solved the problem, so it appears to have been a problem with the font itself rather than the code.

In this particular case, the letters in the font were "missing points at extrema", which FontForge was able to solve with a single click.

回答2:

This may help you.

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

Basically what you need to do is:

-Convert the .ttf to .woff

I don't know why converting it works. But it always work for me. Also… delete your cache or change the name of the file.

I hope this helps

回答3:

Try this

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

回答4:

Go to:

http://yourwebsite/clunk.ttf

If that can not download (as the first error states), then your file location is not correct. You might have to set an absolute path like:

http://yourwebsite/somesubpath/clunk.ttf

/somesubpath/clunk.ttf

回答5:

Check your paths, Best practices is to always use a relative paths (Ex:)

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

Check header: Access-Control-Allow-Origin

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

问题:

回答1:

回答2:

回答3:

回答4:

回答5:

收藏的人(0)

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

问题:

回答1:

回答2:

回答3:

回答4:

回答5:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮