Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@yana1316

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

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
2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
yana1316
フリーランスでモバイルアプリ開発(Flutter)してます。iOS、Android両対応です。 サーバーサイド歴は10年。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?