css中@font-face引入字体文件不生效问题

在网络上下载的字体文件引入后就是不生效，尝试了各种办法后，终于在控制台发现如下警告

意思是说：无法解码下载的字体。

我的字体文件后缀是ttf格式， 看来.ttf文件有浏览器兼容问题

既然无法解码，那就说明是文件源格式出了问题，有个神仙网站正好可以对字体文件进行转码。如下： 在线文字转换工具

我转换为woff和woff2之后终于正常加载字体了。附代码

@font-face {
    font-family: 'AaMiaobukeyan';
    src: url('css/AaMiaobukeyan.woff2') format('woff2'),
            url('css/AaMiaobukeyan.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.text {
    font-family: AaMiaobukeyan;
}

这样字体就能生效啦~ 欢迎一起学习交流~