The Web Design Group

文字プロパティー

Font Properties



文字種類(系)(Font Family)

構文: font-family: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
取りえる値: <family-name>
  • どのような文字種類名でも使われる
<generic-family>
  • serif(セリフ)(欧文活字のひげ飾り) (, Times)
  • sans-serif(サンセリフ)(セルフのないもの) (, ArialHelvetica)
  • cursive(筆記体) (, Zapf-Chancery)
  • fantasy(奇抜) (, Western)
  • monospace(等幅) (, Courier)
初期値: ブラウザで決められる
適用: 全要素
継承: 可能

文字ファミリーは、特別な文字名や汎用文字ファミリーで定められます。明らかに、特別な文字の定義が汎用文字ファミリーと一致しそうにない。多元ファミリー指定も可能で、特別な文字指定がなされる場合最初の文字選択がないケースでの汎用ファミリー名を続けておくべきです。

font-family宣言はこの様になります:

P { font-family: "New Century Schoolbook", Times, serif }

最初の二つの指定は特別な字体(type face)であることに注意してください: New Century SchoolbookTimes。しかしこの両者は serif(セリフ)文字ですので、システムがこれらのどちらかを持っていなくて、要件に合った別の serif文字を持っている場合バックアップとして汎用文字ファミリーがリストされています。

空白がある文字名は、一重乃至二重引用符号で囲っておかなければなりません。

文字ファミリーは、 fontプロパティと一緒に与えられかもしれません。


文字スタイル(Font Style)

構文: font-style: <value>
取りえる値: normal | イタリック | 斜体
初期値: normal
適用: 全ての要素
継承: 可能

font-styleプロパティーは、文字が三通のどれか一つで表示されるのを定義します: normalitalicoblique(斜傾した)。 font-style宣言をしたスタイル・シートの例は、以下のようになります:

H1 { font-style: oblique }
P  { font-style: normal }

文字異体(Font Variant)

構文: font-variant: <value>
取りえる値: normal | small-caps
初期値: normal
適用: 全ての要素
Inherited: Yes

font-variantプロパティーは、文字が normalsmall-capsで表示すべきと定義します。小さめの頭文字は、言葉の全ての文字が小文字よりやや大文字の頭文字です。CSSの新しいバージョンは、 condensed・expanded・small-caps numeralsやその他のカスタム異体などの追加されたものをサポートするかもしれません。 文字異体指定の例は以下のようになります:

SPAN { font-variant: small-caps }

文字重み(Font Weight)

構文: font-weight: <value>
取りえる値: normal | bold | bolder | lighter |
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初期値: normal
適用: 全ての要素
継承: 可能

font-weightプロパティーは、文字の重さを特定するのに使われます。 bolderlighter値は、継承された文字に相対的で、一方その他の値は絶対的な文字重さです。

注意:全ての文字が9の可能性ある画面表示重さを持っていないので、重さのあるものは指定によってグループ化されるかもしれません。特別な重さが得られない場合代替えが、以下の基本にそって選択されます:

font-weight指定の例です:

H1 { font-weight: 800 }
P  { font-weight: normal }

文字サイズ(Font Size)



構文: font-size: <absolute-size> | <relative-size> | <length> | <percentage>
取りえる値:
  • <absolute-size>
    • xx-small | x-small | small | medium | large | x-large | xx-large
  • <relative-size>
    • larger | smaller
  • <length>
  • <percentage>(親要素との関連で)

初期値: medium
適用: 全ての要素
継承: 可能

font-sizeプロパティーは、表示される文字のサイズを修正するのに使われます。絶対的な長さ( ptinといった単位を使った)は、異なるブラウザ環境での適用が悪いので、慎重にで控えめに使用すべきです。絶対的な長さの文字は、ユーザーにとって大きすぎたり小さすぎたり容易に変動することがあります。

サイス指定の例は以下のようになります:

H1     { font-size: large }
P      { font-size: 12pt }
LI     { font-size: 90% }
STRONG { font-size: larger }

制作者は、 Microsoft Internet Explorer 3.x は, emex単位をピクセルとして不正に取り扱い、これらの単位を使ったテキストが判読できなくなりることに気付いておくべきです。ブラウザも、親要素の文字サイズに相対的にではなく、初期文字サイズに相対的なパーセント値を間違って

H1 { font-size: 200% }

レベル1見出しでサイズが、親要素文字サイズの二倍ではなくIEの初期文字サイズの二倍になり、これは危険です。このケースでは BODYが親要素であるかのようで、 mediumを定義すのがよく、一方IEにあった初期レベル1見出しの文字サイズは恐らく xx-largeとみなされます。

これらのバグのため、制作者はfont-sizeでパーセント値を使うには注意すべきで、このプロパティーでは em and ex単位を避けるべきです。


文字(Font)

構文: font: <value>
取りえる値: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
初期値: 未定義
適応: 全ての要素
継承: 可能

fontプロパティーは、 line heightと同じ様に、 色々な文字プロパティー用の略記法です。例えば、

P { font: italic bold 12pt/14pt Times, serif }

これは、太字体でイタリックのタイムス文字乃至はサイズが12ポイントで高さが14ポイントのセリフ系文字でパラグラフを特定します。


Maintained by John PozadzidesLiam Quinn


Web Design Group ‾ CSSインデックスCSS構造CSSプロパティー

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.