0
0

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 1 year has passed since last update.

Vuetifyでフォント設定したら死んだ話

Posted at

症状

Vuetifyでフォントを設定したらiOSでの表示がおかしくなりました.
WindowsでもAndroidでも何ならMacでも大丈夫でした.
iOSの場合にブラウザにかかわらず何度も再読み込みしたり動作がすごく遅くなったりしました.

原因

不明です
誰か突き止めてください
めちゃめちゃに悩んだので記事にしました

環境等

こんな感じ

Windows11
"nuxt": "^2.16.2",
"vue": "^2.7.14",
"vuetify": "^2.6.12"

解決法

通常Vuetifyでフォントを変更する場合「variables.scss」にこんな感じで書くと思います.

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap');
$body-font-family: 'Noto Sans JP';

でもこの書き方をするとiOSでおかしくなりました
で,「nuxt.config.js」でこんな感じで読み込んで解決しました.

 link: [
    {rel: 'preconnect', href: `https://fonts.googleapis.com`},
    {rel: 'preconnect', href: `https://fonts.gstatic.com`, crossorigin: true},
    {
        rel: 'stylesheet',
        href: `https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap`
    },
]

考察

普通に謎です.
そもそもほぼ完成してから気付き,どうせ原因はライブラリだろ,と思っていたのでびっくりしました.

で,気になる箇所はこの辺かな

vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: true,
    ...
}

詳しくはないので適当書きますが,cssが非同期読み込みなのに対し,importは同期的に読み込む?のかな?
で,Vuetifyで「treeShake: true」にするとどうやら使わないコンポーネントなどを排除してくれるらしい
ですが
例えばこのフォント使ってねえな,いらんな,と排除していたのにフォントを使いだしたら,あるはずのフォントがなかったら,バグる?又は毎回フォントを呼びに行く?

ページがめちゃめちゃ重くなるので呼びに行ってる説はあるのだろうか
「treeShake: true」がフォントの1文字1文字を見ている気はしないし,そもそもフォントが見つからなければ代価を使うだけだと思うけども

取り合えず大変に苦労したので謎だらけだけど共有しました.

未だにVue2系を使ってるのは,仕事なのと思想からです

以上

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?