小Z上周五晚上和同事加班，同事反映了这样一个BUG。
网页上有一段文本需要采用方正超粗黑简体的字体，资源文件为“方正超粗黑简体.TTF”，为美工提供。同事反映网站浏览器提示“Failed to decode downloaded font”。于是下载问同事获取了测试页面代码，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
@font-face { font-family: '方正超粗黑简体'; src:url('./styles/font/方正超粗黑简体.ttf') format('truetype'); }
</style>
</head>
<body style="margin:0px;border:0px">
<script>
</script>
<div style="font-family: '方正超粗黑简体' ">方正超粗黑简体</div>
</body>
</html>
然后浏览器的控制台提示：Failed to decode downloaded font。
于是小Z在@font-face增加 format（’truetype‘）,(注意上面的代码原始状态并没有添加该段代码)。依然是之前的提示。
于是小Z把同事给我的字体文件在网上进行解析，网址链接为：https://www.fontsquirrel.com/tools/webfont-generator，然后提示解析失败，文件受损的提示，于是小Z推测美工给的字体文件有受损情况，于是小Z重新下载了该字体包，随后运行成功。
同事表示好气啊，用了2小时去查询该问题的解决方案。
网友评论