【CSS-rules】FontやTextに関するプロパティ一覧

[公開] 2024-08-13 / [更新] 2024-08-16

cssを設定する際、必ず必要になるFontやTextに関するプロパティをサクッと一覧にまとめました。

基本的に現時点(2024年8月)でモダンブラウザであれば問題なく使用できるプロパティを掲載。
ブラウザ対応にバラつきのあるもの、使用に制約のあるもの、実験的なもの、英文(CJK以外)のみに適用されるもの等、あまり汎用的でないプロパティは載せていません。

Fontに関するプロパティ

.	プロパティ	対象	初期値	値	効果	説明
1	`font-style`	フォントの傾斜	normal	normal italic oblique oblique 角度	通常体筆記体斜体斜体	フォントに `italic`、`oblique`一方が無い場合は、ある方を代用。どちらもない場合はブラウザが線画角度 =`ttf,otf` のみ指定可
2	`font-weight`	フォントの太さ (重み)	normal	`normal` `bold 数値指定 /* 親要素相対 */ lighter` `bolder`	`400` `700` `fontによる` /* weight */ 100 900	`normal,bold` は数値指定可指定しない場合、ユーザーエージェント数値指定はfontが持っている`weight`のみ `lighter`,`bolder`はfontに指定`weight`が無ければ無視
3	`font-size`	フォントサイズ	親継承	`em,rem,px,` `%,vw 等`		指定しない場合、ユーザーエージェント
4	`line-height`	行の高さ	親継承	数値のみ em,rem,px,%, 等		数値のみ = `font-size`に数値を掛けたものになる。通常はこの指定を推奨文字は指定した高さの上下中央になる
5	`font-family`	フォントファミリー	親継承	`font名 serif, sans-serif, monospace 等`	特定フォント明朝体ゴシック体等倍	フォント書体や優先順位の指定
	`color`	文字色	親継承	`#,rgb,rgba,` `hsl,hsla 等`

font関係には上記以外にも、TrueType(ttf),OpenType(otf),英字などに対応した様々なプロパティがありますが、当サイトではWEBフォント(woff, woff2) や日本語を主に使用する事を前提としている為、適用されないプロパティは割愛していますm(__)m

他の一括指定と違い、font 一括指定は順序などの記載方法が厳しく、規定外は無視されます。
font-family が必須なので、汎用性は低い? かも _ _;;

CSS code

font: 1-style 2-weight 3-size/4-line-height 5-family

プロパティ	対象	初期値	値	効果	説明
`letter-spacing`	字間	`normal`	`normal,em,rem, px,%,vw 等`		正数で字間が開き、負で字間が狭くなる
`text-align`	水平方向の配置	`start`	`left,start right,end center justify`	左寄せ右寄せ中央揃え両端揃え	左寄せ = `left, start` 右寄せ = `right, end` どちらを使用してもOK
`text-align-last`	段落又は改行前最終行の処理	`auto`	`auto left,start right,end center justify`	指定なし左寄せ右寄せ中央揃え両端揃え	text-align の値と同じ。ただし`justify`の場合は最終行が`text-align-last:start;` になる
`text-indent`	字下げ	0	`em,rem,%, px,vw 等`		正の数→右移動 (字下げ) 負の数→左移動 (ぶら下げ) % = 包含ブロックに対する%
`text-transform`	英字の表記	`none`	`none capitalize uppercase lowercase`	変換なし最初を大文字すべて大文字すべて小文字	`capitalize` は、スペースで区切られた単語ごとに適用される

プロパティ	対象	初期値	値	効果	説明
`line-break`	改行規則 (禁則処理)	`auto`	`auto loose normal strict anywhere`	ブラウザの判断最も制限が少ない一般的な改行規則最も厳格な改行規則禁則を行わない	句読点、々、小字(ぁ,っ,ゃ等の小さい文字) に対する改行処理
`text-overflow`	あふれたテキストの処理	`clip`	`clip ellipsis`	切り取り(非表示) 左に … を付与	包含ブロックが `overflow:hidden` 等である場合のみ
`text-wrap`	折り返す方法	`wrap`	`wrap nowrap balance`	ブラウザの判断折り返しなし各行の文字数を均等	`nowrap` は、包含ブロックからはみ出して表示される `balance` は負荷が大きい為使用には注意が必要。また、ブラウザにより最大行数が決められている
`word-break`	BOXに対する折り返し	`normal`	`normal break-all keep-all`	既定の改行規則単語中でも改行改行無し	CJK、CJK以外とも CJKは規則通り、CJK以外のみ適用 CJK以外は規則通り、CJKのみ適用

プロパティ	対象	初期値	値	効果	説明
`text-decoration`	装飾線	`none`	—		詳しい説明ページ ▶
`text-emphasis`	圏点	`none`	—		詳しい説明ページ ▶
`text-shadow`	影を付ける	none	`offsetX offsetY ぼかし影の色`	水平方向 px 垂直方向 px 正数 px 通常の色指定	`offsetX offsetY ぼかし影の色` 上記の順番で 3 又は 4項目をスペースで繋ぐ `ぼかし` → 未指定可 `影の色` → 先頭に記載してもOK

.	プロパティ	対象	初期値	値	効果	説明
1	`writing-mode`	横書き縦書き	`horizontal-tb`	`horizontal-tb vertical-lr vertical-rl`	左 → 右上 → 下上 → 下	改行は上 → 下改行は右 → 左改行は左 → 右
2	`text-combine-upright`	縦書きの英数字の扱い	`none`	`none all`	英数字は90°回転回転せず1em幅に収める	all は反映させたいテキスト(部分)ごとに指定 (全体指定不可)
3	text-orientation	縦書きの文字の向き	`mixed`	`mixed upright sideways`	英数字のみ90°回転全て縦書き全て90°回転	`sideways-right`もあるが後方互換の為、使用する必要はない

縦書きはwriting-mode(必須)を掛けた上で、2, 3 を追加して見せ方を変更します。
縦書きは、fontやプロパティによって字間や行間などの見え方が変わります。ご注意くださいm(__)m

これは horizontal-tbauto
今日は2024年8月15日です。

これは vertical-lr; です。
今日は2024年8月15日です。

これは vertical-rl; です。
今日は2024年8月15日です。

これはtext-combine-upright: all; です。
all のみ <span>で囲ってスタイルを当てています。

これはtext-orientation: mixed;です。
今日は2024年8月15日←半角数字です。２０２４年←全角数字です。

これはtext-orientation: upright;です。
今日は2024年8月15日←半角数字です。２０２４年←全角数字です。

これはtext-orientation: sideways;です。
今日は2024年8月15日←半角数字です。２０２４年←全角数字です。