解决Kotlin Multiplatform在web中文乱码的问题（会造成额外网络资源消耗）

前言

用kotlin编写安卓应用给我的体验很好，虽然kotlin/wasm目前仍在alpha测试阶段，但我还是想尝试一下用kotlin编写网页的体验。

于是在新项目中添加了web应用，在commonMain中完成了ui的编写，在桌面端和安卓测试没问题以后，信心满满开始运行web应用，结果网页刚打开就出现了这幅画面：

所有中文竟然都没法正常显示，于是赶快去找解决方法，但奈何用kotlin/wasm的人还是太少（其实也正常，这种测试阶段的框架完全不能拿来投入生产使用，只能自己玩玩），网上并没有相关教程，官方也没有明确的解决方案，只有github和官方社区有寥寥几个相关帖子，受到大佬启发，决定使用自定义字体来补充中文的显示。

（相关问题链接：CJK words can not correctly show in the browser · Issue #3967 · JetBrains/compose-multiplatform）

解决思路

这里综合了一下github上的解决方法，由于kotlin/wasm本身无法正常加载中文（后来发现日文也无法正常加载），因此我们可以上传自己的中文字体到资源目录中，并且在程序中自定义文本样式，全部替换为我们自己的字体，即可实现中文的加载。

解决方法

这里使用默认的MaterialTheme作为程序主题，但是要更改其默认字体为自定义字体。

在编写代码之前先把字体文件放到wasmJsMain的resources文件夹下（字体文件为.ttf）

为了在WebAssembly中使用字体数据，需要将字体转换为二进制数据，因此我们在目录中加载字体资源后要转化为ArrayBuffer，并在之后转换为ByteArray来存储字节数据。

但是这里需要注意，ArrayBuffer是JavaScript的类型，无法直接转换为ByteArray，因此我们需要定义一个拓展函数来实现ArrayBuffer向ByteArray的转换，从而方便使用kotlin进行处理。