文字の各種設定です。フォントの種類、色、太さ等を指定します。color以外、全てfont～で始まります。

color

　文字の色を指定するプロパティです。

colorプロパティ利用例

CSS

.sample1 {
　color: red;
}

font-size

　文字のサイズを指定するプロパティです。

　文字のサイズをについてはこの指定方法以外に　xx-large > x-large > large > midium(初期値) > small > x-small > xx small　というキーワード指定も利用できます。

font-sizeプロパティ利用例

CSS

.sample2 {
　font-size: 10px;
}

font-weight

　文字の太さを指定するプロパティです。

　ただしこのプロパティはフォントが太字や細字を持っているかに依存しますので、できるだけ利用は避けるべきです。
　もし太字を利用したいという意図ならtext-shadowプロパティで代用できます。

font-weightプロパティ利用例

CSS

.sample3 {
　font-weight: bold;
}

font-style

　文字の斜体（イタリック）を指定するプロパティです。

　※oblique(斜体)というキーワードもあるのですが、italicと変わりありません。

font-styleプロパティ利用例

CSS

.sample4 {
　font-style: italic;
}

font-variant

　アルファベットの表記において小文字をそのままの大きさで大文字にするスモールキャピタルと呼ばれる表示を指定します。Arial等のアルファベット系のフォントしか対応していませんので、日本語サイトでは利用する意味がありません。

font-variantプロパティ利用例

CSS

.sample5 {
　font-variant: small-caps;
}

font-family

　フォントを指定するプロパティです。
　このページでは文字の装飾についてまとめていますので説明を省略します。

font

　font系サブプロパティを一括指定するプロパティ(ショートハンドプロパティ)です。

fontプロパティ利用例

CSS

.sample6 {
　font: bold italic 10px "Arial";
}

　全てtext～で始まるプロパティです。font～に対してこちらは段落の設定と言えます。

text-align

　水平方向に対する文字(及び画像)の配置を指定するプロパティです。

　初期値はstart：開始側揃えという値なのですが上記では省略しました。
startとleftの違いですが、横書きの場合は同じ挙動なのですが、縦書き(writing-mode: vertical-rl;)の右→左の文章の場合startは右揃え、leftは左揃えになる理論です。
しかし、ブラウザによって正常に表示されずleftと全く同じ挙動となります。

text-alignプロパティ利用例

CSS

.sample7 {
　text-align: center;
}

text-decoration

　文字に下線、取消し線等を指定するプロパティです。CC3から以下text-decoration-color、text-decoration-styleサブプロパティが追加されました。これによりtext-decorationプロパティで線種、色、スタイルの指定を一括で行うことができるようになりましたが、ブラウザの対応に注意が必要です。

text-decorationプロパティ利用例

CSS

.sample8 {
　text-decoration: underline;
}

　　サブプロパティを一括で指定する場合です。以下のtext-decoration-color、text-decoration-styleサブプロパティを併せて確認して下さい。

.sample9 {
　text-decoration: underline solid red;
}

text-decoration-style

　文字の下線、取消し線等の線種を指定するプロパティです。

text-decoration-styleプロパティ利用例

CSS

.sample10 {
　text-decoration-style: dotted;
}

text-decoration-color

　文字の下線、取消し線等の色を指定するプロパティです。

text-decoration-colorプロパティ利用例

CSS

.sample11 {
　text-decoration-color: red;
}

text-indent

　テキストの一行目にインデントを指定するプロパティです。

text-indentプロパティ利用例

CSS

.sample12 {
　text-indent: 1em;
}

text-shadow

　文字に影をつけるプロパティです。

text-shadowプロパティ利用例

CSS

.sample13 {
　text-shadow: 2px 2px 1px gray;
}

　　カンマで区切って複数の影を適用することもできます。

.sample14 {
　text-shadow: 2px 2px 1px gray , text-shadow: 3px 3px 3px blue;
}

line-height

　行の高さを指定するプロパティです。

line-heightプロパティ利用例

CSS

.sample15 {
　font-size: 12px;
　line-height: 20px;
}

　　この指定の場合、1行に上下4pxずつの余白ができます。

vertical-align

　垂直方向に対する文字(及び画像)の配置を指定するプロパティですが、display：inline；つまりインライン要素でないと利用できないという非常に使えないプロパティです。
　ブロック要素の場合、縦揃中央揃えには工夫が必要になります。

vertical-alignプロパティ利用例

CSS

.sample16 {
　vertical-align: middle;
}