DEMO

各プロパティの値を指定する際の順序は以下のように決まっています。
このうち font-sizeと font-familyは省略することができません。

font-style、font-variant、font-weight（順不同）
font-size
line-height
font-family

line-heightを指定する場合には、以下の例のようにline-heightの値を記述する前にスラッシュ（ / ）で区切ります。

font: bold large/150% "ＭＳ明朝”

・フォント名で指定：
｢ＭＳゴシック｣や｢ＭＳ明朝｣のようにフォント名で指定します。フォント名にスペースが含まれている場合には、ダブルクォーテーション（ " ）またはシングルクォーテーション（ ' ）で囲むようにしてください。
キーワードで指定：フォントの種類を表すキーワードで指定します。

sans-serif …… ゴシック系のフォント
serif …… 明朝系のフォント
cursive …… 筆記体・草書体のフォント
fantasy …… 装飾的なフォント
monospace …… 等幅フォント

スタイルシート部分は外部ファイル（sample.css）に記述。
p.sample1 {font-family: "ＭＳゴシック",sans-serif; }
p.sample2 {font-family: "ＭＳ明朝",serif; }
p.sample3 {font-family: Impact,Charcoal; }

・フォントのスタイル
normal：標準フォントで表示します。これが初期値です。
italic：イタリック体フォントで表示します。
oblique：斜体フォントで表示します。
・スタイルシート部分は外部ファイル（sample.css）に記述。
p.sample1 {font-style: italic; }
p.sample2 {font-style: oblique; }

・font-variantプロパティ
normal：標準のフォントで表示します。
small-caps：スモールキャップのフォントで表示します。スモールキャップのフォントがない場合には、大文字を縮小したものを小文字として表示します。
p.sample {font-variant: small-caps; }
※ 知りませんでしたね(^^♪

・font-weight

normal …… 標準の太さです。（数値で400を指定した場合と同じ）
bold …… 一般的な太字の太さです。（数値で700を指定した場合と同じ）
lighter …… 相対的に一段階細くします。
bolder …… 相対的に一段階太くします。

span.sample2 {font-weight: bold; }
span.sample100 {font-weight: 100; }

font-sizeプロパティは、フォントのサイズを指定する際に使用します。
数値で指定：数値にpxやemやexなどの単位をつけて指定します。pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。また、emとはフォントの高さを1とする単位で、exとは小文字の｢x｣の高さを1とする単位です。数値には負の値は指定できません。
％で指定：％値で指定します。
キーワードで指定：xx-small、x-small、small、medium、large、x-large、xx-largeの7段階があり、mediumが標準サイズです。1段階上がると1.2倍のサイズになります。また、smaller、largerを指定すると大きさが1段階上下します。
span.sample1 {font-size: 12px; }
span.sample2 {font-size: 12em; }
span.sample3 {font-size: 12ex; }
span.sample4 {font-size: 80%; }

・font-size-adjustプロパティは、フォントの種類の違いによるサイズのバラつきを調整して、テキストを読みやすくする際に使用します

・font-stretchプロパティは、フォントを幅狭・幅広に表示する際に使用します。

ultra-condensed：normalより4段階幅狭、この指定が最も幅狭となる
extra-condensed：normalより3段階幅狭
condensed：normalより2段階幅狭
semi-condensed：normalより1段階幅狭
normal：標準の形状（初期値）
semi-expanded：normalより1段階幅広
expanded：normalより2段階幅広
extra-expanded：normalより3段階幅広
ultra-expanded：normalより4段階幅広、この指定が最も幅広となる
narrower：1段階幅狭にする
wider：1段階幅広にする

Font表示の仕組みが変わったようです。

0123456789
abcdefghijklmnopqrstubwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
海へ！山へ！レジャー、帰省準備特集
あかさたなはまやらわ
アカサタナハマヤラワ
零壱弐参肆伍陸漆捌玖拾

DEMO

Home / Demo / Font

Font関連事項

Fontの違い

現行のcss指定通り

ＭＳＰゴシック

ＭＳＰ明朝

ＭＳＰゴシック

Times New Roman

Impact

DEMO

Home / Demo / Font

Font関連事項

Fontの違い

現行のcss指定通り

ＭＳ Ｐゴシック

ＭＳ Ｐ明朝

ＭＳ Ｐゴシック

Times New Roman

Impact

ＭＳＰゴシック

ＭＳＰ明朝

ＭＳＰゴシック