Failed to decode downloaded font

phpstorm

chrome浏览器

在使用@Font-face设置自定义字体的时候要考虑兼容性。如果下载的字体只有一种格式，需要把其他的格式都转换出来。（关于自定义字体兼容性问题可以自己搜索）。格式最好包括 .eot  .otf .svg .ttf .woff .woff2。这几种就够了。

如果有其中的一种格式，我们可以借助一下字体格式转换网站去转换一下。推荐使用：fontke

首先上传你的字体，前提是保证字体是可以用的。然后选择转换的字体，选好后点击立即转换。这个时候网站就会自动下载已经转换好的字体。

有了字体集之后，在css里面加上对应的字体即可。例如下面这样。（注意：相对路径要写对，不然报错。）@font-face {    font-family: '经典行书简';    src: url('../../../font/经典行书简.eot') format('embedded-opentype'),    url('../../../font/经典行书简.woff2') format('woff2'),    url('../../../font/经典行书简.woff') format('woff'),    url('../../../font/经典行书简.ttf') format('truetype'),    url('../../../font/经典行书简.svg#fontawesomeregular') format('svg');    font-weight: normal;    font-style: normal;}.home-row1-title{    width: 631px;    height: 53px;    margin: 58px auto 47px auto;    display: flex;    align-items: center;    font-size: 51px;    font-family:'经典行书简';}最后就看到字体正常显示出来了。