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

AMPのCSSではfont-familyの『"』が必須になってる

プログラミング

CSSの圧縮では極限まで小さくすると、font-familyのダブルクォーテーション(")を削除します。

これがAMPではエラーになります。以前はそんなことなかったんですが仕様が変わったらしい。

じつはこの現象、2020年の夏ぐらいには気づいていました。font-familyで "invalid property value"(無効なプロパティ値) が出るのですぐ分かります。

ただ当時は、カスタムCSSのサイズが50,000byte(約50k)で小さかったので、ダブルクォーテーション(")を追加する余力がありませんでした。

そのあと50%増量の75,000byte(約75k)になったので、だいぶ余裕が出てきたので修正しやすくなっています。

postcss(cssnano)の設定

CSSの圧縮のツールで有名なpostcssの設定をご紹介します。webpackなどでも使われているので一番、参考になるのではと思います。

英語ですが簡単な単語なのですぐに分かります。

webpackならこう。

webpack.config.js
options: {
  postcssOptions: {
    plugins: [
      require("cssnano")({
        preset: ['default', {minifyFontValues: {removeQuotes: false}}]
      }),
    ],
  },
},

そのほかのツールを使ってる人は同じような設定があるかもしれないので探してみてください。

ウェブサービスを使って圧縮している人は微妙。それぞれのサービスにこのオプションがあるか分かりません。

ダブルクォーテーション(")が無くても効くフォントはあります。しかし、日本語や半角スペースのあるフォントは効いたり効かなかったり微妙です。

このさい圧縮するにしても付けれるなら付けたほうがいいでしょう。

ボクと同じようにCSSのMaxサイズに余裕がなかった人はいま、かなり余裕があるはずなんで直せますよ。という話でした。

コメントを残す

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