Flutter web(beta)で簡単なサイトを作ったのですが、以前デプロイしたときは問題なく日本語フォントで漢字が表示されていたのに、さきほどデプロイすると中国フォントで表示されていた。
Inspecterで中身を見てみようとすると・・・、あれ?Canvas描画になっている・・・。
以前は、HTML+CSS描画になっていて、Divの中身を見れたのに・・・?
どうやら、Flutter webではビルドオプションで書き出し方法をHTML+CSS
かCanvas
かで選択できるらしく、デフォルトではauto
になっているようです(汗
そのため、Canvas描画が選択され、画像として中国系フォントで文字列が出力されていた、ということが原因のようです。
なるほど、以下の特徴から選択できるんですね。
- HTML書き出しの場合、DLサイズが小さくなる
- Canvas書き出しの場合、どのブラウザで見てもPixel-perfectで描画する
(各ブラウザでズレが発生しない)
まぁ簡単なポートフォリオなのでズレは気にしないですし、HTMLで書き出した場合のSEO的なものも検証していきたいのでHTML書き出しにしました。
結果、問題は解消されました。
flutter build web --release --web-renderer html