Closed3

タイポグラフィに関連する font系のCSSのプロパティ の種類について調査・まとめ

まさぴょん🐱まさぴょん🐱

Project内のタイポグラフィを統一するために、font系のCSSのプロパティの情報をまとめます。

font プロパティで、フォント関連のスタイルを一括で指定することができる模様。
https://www.tagindex.com/stylesheet/properties/font.html

ただ、1つ1つ設定する方が可読性や意味的にわかりやすいと判断できる。

この記事は、文字に関するCSSプロパティが、細かくまとまっていて優秀。
https://b-risk.jp/blog/2019/08/text-css/#link08

こちらは、font プロパティの話だが、font-stylefont-variantfont-weightfont-stretchfont-sizeline-heightfont-family の7つのプロパティの一覧表 & 説明がわかりやすい。
http://www.osaka-kyoiku.ac.jp/~joho/html5_ref/css/font_css.php

まさぴょん🐱まさぴょん🐱

次のプロパティを有したCSS Class の Setを、表現したいパターンごとに作成するのが、よさそうかな。。。

  1. font-family:フォントの 種類 を指定します。
  2. font-style:フォントのスタイル(立体・イタリック・斜体 など)を指定します。
  3. font-size:フォントの「サイズ」を指定します。
  4. font-weight:フォントの「太さ」を指定します。
  5. color:文字の「色」を指定します。
  6. line-height:行の「高さ」を指定します。
  7. letter-spacing:文字と文字の「間隔」を指定します。
このスクラップは2023/07/17にクローズされました