Simple HTMLHTMLリファレンス

Main Menu

おすすめリンク

Site Info.

CSSプロパティ

HTMLリファレンス

CSSリファレンス

その他の記事

CSSリファレンス インデックス

スポンサーリンク

CSSリファレンス

FONTフォントTOPCSSPropertiesFont

  1. font-style欧文フォントの斜体・イタリック体
  2. font-variant欧文フォントのスモールキャップ(スモールキャピタル)
  3. font-weightフォントの太さ
  4. font-sizeフォントの大きさ
  5. line-height行の高さ
  6. font-familyフォントの種類
  7. fontフォントのショートハンドプロパティ

fontフォントのショートハンドプロパティ

プロパティの値[ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
初期値個別プロパティを参照
対象要素全要素
継承する
%'font-size'のみ有効
メディアvisual
W3C Ref.CSS2.1CSS3

プロパティの書式と機能

フォントに関する一連のプロパティを一括指定するショートハンドプロパティです。

フォントプロパティの記述例

フォントプロパティの記述の際には値の記述順が決まっている省略できな値がある'line-height'の値の前にはスラッシュを付けるなど、いくつかの注意点があります。

  1. font-style、font-variant、font-weight省略可能、順不同
  2. font-size必須
  3. / line-height省略可能、値の前に半角スラッシュを付ける
  4. font-family必須

下の例では、どちらも同じ指定内容を示しています。

p span	{
	font-style	: italic ;	イタリック体を指定
	font-variant	: normal ;	スモールキャピタルでノーマルを指定
	font-weight	: bold ;	フォントの太さを指定
	font-size	: 1.5em ;	フォントサイズの指定
	line-height	: 1em ;		行高さを指定
	font-family : 'MS Pゴシック',sans-serif ; フォントの種類を指定
	}
p span	{font: italic normal bold 1.5em/1em 'MS Pゴシック',sans-serif}

システムフォントの指定

次に示す値はシステムフォントを指定するためのものです。システムフォントとは、例えばWindowsであればウィンドウのタイトルバーやメッセージボックスなどに割当てられているフォントを指します。実際に表示されるフォントは環境やUAの実装によって異なる場合があります

システムフォントを指定する場合の注意点

システムフォントの指定に限っては、単独での指定となります。font-size、font-family、font-weigt、font-styleについては各個別プロパティの値が適用されます。

プロパティの値機能
font: captionキャプションのシステムフォントを指定
font: iconアイコンのシステムフォントを指定
font: menuメニューのシステムフォントを指定
font: message-boxメッセージボックスのシステムフォントを指定
font: small-captionキャプションのシステムフォント(小)を指定
font: status-barステータスバーのシステムフォントを指定
システムフォントの指定についての補足

デザイン性のあるフォントは後からインストールされる場合が多く、ユーザーの環境によっては指定したフォントで表示できないケースも考えられます。このようにCSSで指定されたフォントが見つからない、あるいはフォントを指定しない場合には、ブラウザで設定されているフォント(通常はシステムフォント)が使用されるため、あえてCSSでシステムフォントを指定する必要性は少ないと考えられます。

なお、OSやブラウザのフォント設定を変更している場合は、その環境に応じたフォントが使用されます。

スポンサーリンク
Copyright (C) 2010 Simple HTML. All Rights Reserved.