Avalonia 11 WebAssembly中文乱码

文章目录

  • 0x00 原因
  • 0x01 解决方法
    • FontForge
  • 0x02 使用自定义字体
    • App.axaml
    • 控件使用
    • 效果

0x00 原因

新建的Avalonia 11 WebAssembly项目,直接运行的话,会发现中文都是乱码,并且直接在控件上修改FontFamily属性是无法生效的。
Avalonia 11 WebAssembly中文乱码_第1张图片

0x01 解决方法

使用自定义字体,可以在网上下载TTF字体文件,放在项目的Assets文件夹下面。

Avalonia项目,是由多个平台的子项目组合成的,共享使用的界面文件和资源文件都放在与解决方案同名的项目里即可,比如解决方案名字叫做WebTest,那么里面只需要将文件放置在项目WebTest里的Assets文件夹即可
后续我们把和解决方案同名的项目简称为主项目
Avalonia 11 WebAssembly中文乱码_第2张图片
放置在如下图的位置
Avalonia 11 WebAssembly中文乱码_第3张图片

FontForge

放置好字体文件后,我们还需要知道字体的真实名称是什么,这个时候需要使用到一款工具,叫做FontForge
Avalonia 11 WebAssembly中文乱码_第4张图片

传送门:FontForge

如何使用FontForge打开TTF字体,这个不用我解释了吧???实在不会,您就直接拖拽。
Avalonia 11 WebAssembly中文乱码_第5张图片
然后找到Element菜单,选择Font Info选项,找到FontFamily这个属性,这就是真实的名称。
Avalonia 11 WebAssembly中文乱码_第6张图片
Avalonia 11 WebAssembly中文乱码_第7张图片

0x02 使用自定义字体

App.axaml

打开主项目的App.axaml文件,然后添加如下代码

<Application.Resources>
	<FontFamily x:Key="MyFont">avares://WebTest/Assets/微软雅黑.ttf#Microsoft YaHeiFontFamily>
Application.Resources>
  • x:Key里面的名称可以自行命名
  • TTF文件位置根据自己如何放置而定
  • #后面的字体名称,填写当前TTF文件使用FontForge获取到的真实字体名称

控件使用

直接使用FontFamily属性然后绑定StaticResource即可使用
Avalonia 11 WebAssembly中文乱码_第8张图片

效果

Avalonia 11 WebAssembly中文乱码_第9张图片

你可能感兴趣的:(C#,Avalonia,wasm,avalonia,c#)