【CSS】css軽量化の為にfontプロパティについて調べてみた

wordpress
https://unsplash.com/
この記事は約2分で読めます。
Sponsor Link
Sponsor Link

AMPページエラーに6個だけどスタイルシートエラーがずーっと出まくっていて
少しでも軽量化出来ないものか…と調べていて見つけたfontプロパティについて
まあ、これだけじゃほんとに微々たるものなんですけどね…やらないよりは少しでもって感じです

css fontとは

cssでフォント関係の装飾をする場合、基本はこんな感じに書くと思います

.aabbcc {
font-size: 〇〇;
font-weight: 〇〇;
font-family: "〇〇";
}

これを一纏めに出来るのがfont: 〇〇;です

纏められるスタイルは以下の7種で各順番は以下のように決まっていて
更にfont-size、font-family省略出来ない
最低限サイズとファミリーを使っている部分はこの方法で数バイトは減らすことが出来ますね

  1. font-style、font-variant、font-weight(ここは順不同)
  2. font-size
  3. line-height
  4. font-family

line-heightを指定する場合font-sizeの後ろに/(半角スラッシュ)を書いて続ける
例:1em/1.5

実際に当サイトで使っているスタイル

font: 700 1em "Raleway", sans-serif;

この方法で書く場合フォントファミリーを省略出来ないのが辛い所ですね
装飾する場合サイズや太さは指定してもフォントファミリーを常に使う訳じゃないので
ただ、全体で適用させているフォントが分かる場合はそれを指定してあげればOKですけどね

おわり

短い記事ですが今回は少しでもバイト数を減らして、エラーの改善が出来ないか?という内容でした
必要なくなった部分だったり、ここは削除出来るなーっていう部分は消してるんだけどエラーが直らんのよね
いっそ通常ページで読み込ませているファイルをAMPで使わずに物凄く簡素なページにするか
AMPをやめればこんなに苦労しなくて済むんですけどねぇ…
というか、スタイルシートの制限上限をもう少し緩くして欲しいっす

[share]

タイトルとURLをコピーしました