ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

Font Awesome 5, ::before, ::after (CSS疑似要素) がAMPで表示できない原因

Font Awesome

特に何をしたという覚えはないのに、突如、疑似要素でFont Awesome 5を使っていたものがAMPだけ表示されなくなりました。

あの□で表示されるやつ。原因は意外なところにあって、AMPってそういう仕様なのか? それどうにかしてくれないか? ってちょっとイラついた。

原因は、webpackでcssのminimize(圧縮)をするとダブルクォーテーションが消されるから。

minimize前
.test:after{
  content:"\f00c";
  font-family:"Font Awesome 5 Free";
  font-weight:900;
}
minimize後
// 見やすいように整形
.test:after{
  content:"";
  font-family:Font Awesome\ 5 Free;
  font-weight:900
}

『Awesomeの後ろの '\' ってなんだ?』と思いますが、そうなるとしか言いようがありません。

最初、この '\' が犯人だと思っていましたが、AMP以外では正常に動作しているし、'\' を消してもダメでした。

じつはこの現象、2020年の夏には発見していたんですが、作業の優先順位の関係で放置していました。

それ以前はAMPでも正常に表示されていたので、よけいに原因が特定できなかったのもある。

半年以上の月日を経て、意外にもあっさり解決した方法が、cssのminimizeの設定変更。

font-familyの文字列は圧縮オプションから外すようにしました。

AMPってそういう仕様?

原因を特定して修正できたのでOKってしたいところですが、どうも腑に落ちない。

なぜAMPではfont-familyの圧縮がダメなのかが分からないから。

『そういう仕様だから』なんでしょうが、それを書いているAMP公式ドキュメントが見つからないので、よけいにモヤモヤ。

よく起きそうなことだと思うんだけど。というか結構大きめな相違点だと思うんだけど。

ブラウザのローディングもしくはレンダリングの仕様のちがいなんでしょうが、それ、すぐ見つかるところでアナウンスしてほしいな~。

アナウンスしてるのはブラウザのほうかな? そっち方面を調べてみよう。

前の投稿
Font Awesome 5は公式のCDNでCSS配布を再開したらしい
Font Awesome 6にフリー版がない(この先ずっと?)
次の投稿

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください