LoginSignup
0
0

More than 3 years have passed since last update.

IEのウェブフォントで<br>が豆腐(トーフ、TOFU)になるバグを治す

Last updated at Posted at 2020-10-15

結論

br {
  font-family: sans-serif !important;
}

以上です。

そもそもトーフバグとは

コンピューターで表示できない文字がある場合、文字の代わりに小さい四角(□:通称"豆腐")が表示されること。
ちなみに GoogleFonts の NotoFont は No Tofu("豆腐"が現れることがなくなるように)という意味を込めて名付けらたそうです。

現象

私の環境では既存のウェブフォントをサブセット化して軽量にしたものを読み込んでいるのですが
なぜかWindows の IE11 上で改行コード(brの部分)にトーフが出現してしまいました。
MacとWindowsでは改行コードが違うため( \n/r/n )、サブセット化の際にWindowsの改行コードも含めればいいのかなと思ったのですが、その方法がわかりませんでした。
そして色々悩んだ末、結論上記の方法で取り急ぎ解決しました。

ただ、元々のウェブフォント適応部分のスタイルも


.webfont {
  font-family: "webfont", sans-serif;
}

としているので、 "webfont" にない文字は sans-serif にフォールバックされる想定だったのですが
なぜかうまくいかず、 br への直接指定(念の為important)で解決しました。

サブセット化段階で解決する方法があればコメントいただけますと幸いです。

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