Posted at

CSSのフォントをもう一度

More than 1 year has passed since last update.

フォントの指定について自分が知らなかったことのメモ。


font-size

・%指定。

親要素のフォントサイズに対する%で指定。

・キーワード指定

xx-small、x-small、small、medium、large、x-large、xx-large

・smaller、larger

親要素に対して1段階小さくor大きくなる。


サイズ指定単位

・px

画面の1pxを1とする単位。

・pt

1/72インチ(ワープロとかで使われる単位)

1インチ = 2.54cm

・em

○font-sizeに指定した場合

親要素のfont-sizeプロパティの値を1とする単位。

例、親要素が12pxの場合、font-size:0.5emなら6pxに、font-size:1.5emと指定すると、18pxになる。

○それ以外の要素に指定した場合

その要素に指定されているfont-sizeの値を1とする単位。


line-height

行間の高さを指定する

・実数

単位をつけない、実数(1.5など)で指定。

フォントサイズと、指定した実数をかけた高さになる。

・単位付きの実数

行間をpxなどで指定。

・パーセンテージ

フォントサイズに対する%で指定。

・normal

ブラウザが妥当だと判断する行間に設定。(ブラウザによって異なる)

※なぜ実数指定があるのか

line-heightは子要素にも影響する。

子要素にline-hegihtの値が影響するとき、「指定された値」ではなく、「計算結果」の値が影響する。

フォントサイズが10pxの要素に対してline-heightを1.5emや、150%で指定すると、子要素のふフォントサイズ30pxの要素のline-heightは15pxになり文字がはみ出す。なのでline-heightは多くの場合実数で指定される。

<style media="screen">

#defalut{
font-size: 10px;
line-height:1.5em;(←これでは#largeのフォントがはみ出す。"1.5"で指定。)
}
#large{
font-size: 30px;
}
</style>
<div id="defalut">
<div>hello</div>
<div id="large">hello</div>
</div>

・親要素の値の継承をしないプロパティであってもinheritと指定すると、継承できる。


font-family

・font名

Arial Boldのようなフォント名ではなく、Arialのようなフォントファミリー名を指定。

半角スペースや記号などを含むものがあるので、ブラウザにフォントが認識される様に""をつける。

・デフォルト

serif、sans-serif、cursive、fantasy、monospace

5種類のキーワードでおおまな種類を指定。

表示されるフォントはブラウザによって異なる。

複数指定する時は、""をつけない。

(cursiveとfantasyを日本語に指定したとき、chromeでは認識されなかった)


font-weight

100~900まで100づつ指定。

数字が小さいほど細い。


font-style

・italic

イタリック体

・oblique

普通のフォントを斜め表示


font指定

font : font-sytle font-weight font-size/line-height font-family;

で指定できる。

※font-sizeとfont-family以外は省略可能。

(font-familyは親要素で指定されていたら省略可能)

#defalut{

font: italic 100 1.5em/2 serif;
}


text-align

これはブロックレベル要素にしか指定できない。

ブロックレベル要素の中のinline要素全体の行揃え指定。


text-decoration

・underline

・overline

・line-through(取り消し線)

・none


letter-spacing

文字間隔指定。マイナスで狭くすることも可能。

指定方法

・単位付き実数

・normal


text-indet

指定方法

・単位付きの実数(1emを指定すると1文字空く)

・%


text-transform

・uppercase(アルファベットを大文字で表記)

・lowercase(アルファベットを小文字で表記)

・capitalize(単語の先頭を大文字で表記)


ベンダープレフィックス

まだ草案段階の機能は、先頭にベンダープレフィックスをつける。

しかし、将来その機能が確定した時を考えて、ベンダープレフィックスをつけていない機能名を書いておく。

17949664_1078389828934124_1786342277_o.jpg