html里显示中文字体乱码的解决办法

遇到的问题:
在用webpack对自定义字体(网上下载的ttf字体文件)进行压缩打包时,遇到了页面显示英文正常,但是中文出现乱码的情况。
现象:
在这里插入图片描述
如图:world前的中文出现了乱码
现在来看webpack的相关配置:
html里显示中文字体乱码的解决办法_第1张图片
这里对本地自定义的.ttf字体文件使用了file-loader加载器进行转码解析,没有问题。
html里显示中文字体乱码的解决办法_第2张图片
上图这里是从网上下载的个性自定义ttf格式的字体文件
html里显示中文字体乱码的解决办法_第3张图片
上图,这里是在样式文件中,对自定义字体文件的引入和设置,显而易见,问题也不是出在这里
经过一番查找资料,最终发现,html文件中缺了对content-type的设置,如下图:⬇️
html里显示中文字体乱码的解决办法_第4张图片
经过修改这里后,加上了meta属性配置,指定charset=utf-8,最终问题得以解决:
在这里插入图片描述
可见:你好的字体样式为非系统默认自带的字体类型,问题解决。。。

你可能感兴趣的:(css样式模拟)