11
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Flutter webでHTMLかCanvasでの書き出し

Posted at

Flutter web(beta)で簡単なサイトを作ったのですが、以前デプロイしたときは問題なく日本語フォントで漢字が表示されていたのに、さきほどデプロイすると中国フォントで表示されていた。

Inspecterで中身を見てみようとすると・・・、あれ?Canvas描画になっている・・・。

以前は、HTML+CSS描画になっていて、Divの中身を見れたのに・・・?

どうやら、Flutter webではビルドオプションで書き出し方法をHTML+CSSCanvasかで選択できるらしく、デフォルトではautoになっているようです(汗

そのため、Canvas描画が選択され、画像として中国系フォントで文字列が出力されていた、ということが原因のようです。

なるほど、以下の特徴から選択できるんですね。

  • HTML書き出しの場合、DLサイズが小さくなる
  • Canvas書き出しの場合、どのブラウザで見てもPixel-perfectで描画する
    (各ブラウザでズレが発生しない)

まぁ簡単なポートフォリオなのでズレは気にしないですし、HTMLで書き出した場合のSEO的なものも検証していきたいのでHTML書き出しにしました。
結果、問題は解消されました。

flutter build web --release --web-renderer html
11
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?