Flutter 网络应用日文字符（非英文字符）不起作用

Question

我准备用vs code写flutter web。在创建 Flutter 应用程序之前，我已经输入了以下命令。

flutter channel beta

flutter upgrade

flutter config --enable-web

之后我通过

创建了一个 flutter 网络应用程序

vsCode > Shift+Command+P > Flutter:New Application Project

我在创建新的 flutter web 应用程序后在生成的示例代码中添加了一些日语和阿拉伯语文本。当我运行 Shift+F5 或 F5.

时不显示日语文本

如果我运行从终端使用以下命令显示日文和阿拉伯文本。

flutter run -d chrome

但是，如果我不在终端中再次按 'r' 或 'R'，热重载将不起作用。

有没有人遇到这个问题并且有解决方案？

Answer 1

按F5启动Flutter项目时，dartdevc compiler is used, but command flutter run -d chrome uses dart2js编译器。

dartdevc 在 canvas HTML 元素上渲染文本（使用 CanvasKit）并使用系统字体。

dart2js 将文本呈现为段落 HTML 元素，因此使用来自浏览器的字体。

作为解决方法，您可以使用 a custom font, for example Noto Sans JP.

有相关issue.

Flutter web app Japanese Character(Non English Character) doesn't work