react项目引入字体文件失败：Failed to decode downloaded font

react项目中引入字体文件，本地启动时，有时候生效，有时候失败，控制台提示：Failed to decode downloaded font。

解决办法：

1. 重新下载字体文件，保证字体文件无损坏。

2. 将字体文件放在public/fonts/目录下。

3. css文件中引入字体：

@font-face {
  font-family: 'DingTalk-JinBuTi';
  src: url('/fonts/DingTalk-JinBuTi.woff2') format('woff2'),
       url('/fonts/DingTalk-JinBuTi.woff') format('woff'),
       url('/fonts/DingTalk-JinBuTi.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

注意：

1）font-family的值要与字体文件打开后显示的“字体名称”一样。

2）src中url路径不添加public，直接使用/即表示在public目录下，项目中加上/public的别名~@public之后，有时字体文件引入会失效，直接使用上述代码的/fonts/……路径即可。

3）打包后，public目录下的字体文件作为静态资源存在，部署到服务器上之后，发现字体引入失效，控制台提示的download路径为：http://ip/fonts/……，此时结合打包文件在服务器上的存放路径，将url加上打包文件夹名称，即url('/打包文件名/fonts/DingTalk-JinBuTi.woff2')，重新打包部署后字体引入成功。