Failed to decode downloaded font

2023年1月11日 183次阅读 来源: 当我写下一亿行代码

小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小时去查询该问题的解决方案。

    原文作者：当我写下一亿行代码
    原文地址: https://www.jianshu.com/p/51bd1d97c422
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞