Home/Menu

スタイルなCSSの基礎講座

フォント

◆ はじめに

つぎは、フォント系のプロパティです。
今は、間違ってもfont要素を使わないように...。すでに過去のものです。
代わりに、スタイルシートのフォント系のプロパティを使いましょう。

尚、デフォルトのスタイルの関係で、サンプルの表示が環境によって異なる場合があります。

◆ フォント系プロパティ

font-familyプロパティ

要素内で使用されるフォントを設定するプロパティです。
フォント名を「,」で区切って複数指定できます。そのときは、前から見ていき、ユーザの環境で利用できるフォントにマッチしたものが採用されます。また、複数指定の最後には、以下のキーワードを指定することをお勧めします。これは、複数指定したものにマッチしなかったときに最後にマッチさせるものです。尚、フォント名にスペースを含む場合は、「"」または「'」で囲んでください。

font-family: "MS P明朝",平成明朝,serif;
適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素ブラウザ次第yesNN6,IE5.5

font-sizeプロパティ

要素内で使用されるフォントのサイズを設定するプロパティです。
設定値は、実数値+単位、%値、キーワード(xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger)があります。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素mediumyesNN6,IE5.5

font-weightプロパティ

要素内で使用されるフォントの太さを設定するプロパティです。
設定値は、100,200,300,400,500,600,700,800,900、キーワード(normal,bold,lighter,bolder)があります。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素normalyesNN6,IE5.5

font-styleプロパティ

要素内で使用されるフォントのスタイルを設定するプロパティです。
設定値は、キーワード(normal,italic,oblique)があります。
obliqueとは、italicと似ている斜体です。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素normalyesNN6,IE5.5

font-variantプロパティ

要素内で使用されるフォントのスモールキャップを設定するプロパティです。
設定値は、キーワード(normal,small-caps)があります。
スモールキャップとは、小文字が大文字を小さくしたような形状のフォントです。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素normalyesNN6,IE5.5

font-stretchプロパティ

要素内で使用されるフォントの文字幅を設定するプロパティです。
設定値は、キーワード(ultra-condensed,extra-condensed,condensed,semi-condensed,normal,semi-expanded,expanded,extra-expanded,ultra-expanded,narrower,wider)があります。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素normalyes両方ともNG

font-size-adjustプロパティ

要素内で複数使用されるフォントのサイズを調整するプロパティです。
設定値は、実数値です。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素noneyes両方ともNG

fontプロパティ

要素内でフォント関連の複数のプロパティを一括で指定します。
スペースで区切って指定します。尚、指定の順番は以下の通りです。

  1. font-style
  2. font-variant
  3. font-weight
  4. font-size
  5. line-height
  6. font-family

font-sizeとfont-family以外は省略ができます。また、line-heightの値の前には必ず「/」が必要です。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素ここのプロパティを参照yesNN6,IE5.5

サンプル

ちゃいちゃんは「一生懸命生きること」実践したよ!
また、ちゃいちゃんは「人の良いところ」をどんどん見つけたよ!
ちゃいちゃんのローマ字でのスペルは、Chaichanです!

----------CSS2 ソース------------------------------------------------
p.sample {
    color: Navy;
    border: solid 1px #4444aa;
    padding: 1.2em;
    text-align: center;
    font: 12pt/200% "MS P明朝",平成明朝,serif;
}
.level1 {
    color: rgb(0,128,0);
    background-color: #aaffaa;
    font-family: "MS P明朝",平成明朝,serif;
    font-size: small;
}
.level2 {
    color: #ff6600;
    background-color: #ffffff;
    font-family: "MS Pゴシック",Osaka,sans-serif;
    font-size: medium;
}
.level3 {
    color: #ff0066;
    background-color: #ffffff;
    font-family: "Comic Sans MS",sans-serif;
    font-weight: bold;
}
---------- HTML4.01 ソース -----------------------------------------
<p class="sample">
ちゃいちゃんは<em class="level1">「一生懸命生きること」</em>実践したよ!<br>
また、ちゃいちゃんは<em class="level2">「人の良いところ」</em>をどんどん見つけたよ!<br> 
ちゃいちゃんのローマ字でのスペルは、<em class="level3">Chaichan</em>です! 
<p>

Home/Menu/スタイルシート概説リファレンス