■ font-size
長さの指定
一般的なフォントサイズの指定です。単位には幾つかありますが px / pt がよく使われます。
font-size:10px
font-size:10px
font-size:11px
font-size:12px
font-size:13px
font-size:14px
font-size:10pt
font-size:11pt
font-size:12pt
font-size:13pt
font-size:14pt
おすすめの単位はテーブルなどの幅にもよく使われる px です。
% と em の指定
body などの文字サイズを基準にした%による指定もできます。100%がノーマルです。
このページは 14px になっていますので、それに対しての割合で表示されます。
font-size:80%
font-size:90%
font-size:100%
font-size:110%
font-size:120%
font-size:0.8em
font-size:0.9em
font-size:1.0em
font-size:1.1em
font-size:1.2em
IEでも文字サイズは固定されませんので、サイトを見る人を重点に置いた単位と言えます。
em はお勧めの単位です。
キーワードの指定 xx-small x-small small medium large x-large xx-large
body などの文字サイズを基準にしたキーワードによる指定もできます。
このページは 14px になっていますので、それに対しての割合で表示されます。
この場合xx-smallから1.5倍づつ大きくなっていきます。
font-size:xx-small
font-size:x-small
font-size:small
font-size:medium
font-size:large
font-size:x-large
font-size:xx-large
便利な使い方
例えばテーブルの td の文字サイズを 14px に指定して、テーブル内の文字サイズを大きくしたり小さくする場合があるなら、
その部分を 90% や 110% などにしておくと、td のサイズを 13px に変更した時、
それに合わせて小さくしたり大きくした文字も変更されます。つまり変更する時の手間が減るわけです。
キーワードも同じように使えます。
■ font-style
イタリック体・斜体 normal italic oblique
文字をイタリック体・斜体・ノーマルで表示するものです。
normal→ font-style:normal
italic→ font-style:italic
oblique→ font-style:oblique
italicとobliqueは同じ表示ですね。しかし本来は違う事になっています。
文字の斜体は強調などに使われますが、個人的には読み難いので好きではありません。
■ font-weight
文字の太さ normal bold bolder lighter 100 200 300 400 500 600 700 800 900
文字を太くするもので、normal=400 bold=700 です。
font-weight:normal
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:100
font-weight:200
font-weight:300
font-weight:400
font-weight:500
font-weight:600
font-weight:700
font-weight:800
font-weight:900
現在のブラウザでは 100〜900 で細かく指定してもnormalとbold の2通りしか表示できないので、
normalまたは400 と boldまたは700 を使い分ければ良いようです。
■ font-family
文字のフォント名を指定する
フォントの種類は豊富です。しかしPCに入っているフォントしか表示する事が出来ません。
従って面白いフォントを見つけてきてそのフォントを指定しても、一般的な訪問者にはそのフォントで表示されません。
またMacとWindowsでもフォントが違うので、フォントを指定するのは以外に難しいです。
font-family:Arial
font-family:Times New Roman
英数字では上のようにMacとWindowsの共通フォントあります。
またフォントを指定する時は、複数入れておく事も出来ます。例えばMac用とWindows用など。
font-family:'MS P明朝',細明朝体
またMS P明朝のようにフォントの中にスペースのあるものは " や ' で囲います。
■ font-variant
英字の大文字を小文字サイズにする normal small-caps
アルファベットの大文字を小文字サイズで表示する利点は分かりません。
normal → ABCDEFG abcdefg
small-caps → ABCDEFG abcdefg
small-caps の方も ABCDEFG abcdefg と書きましたが、少し小さめの大文字になります。
■ font
フォント系属性を一括指定
font-style font-weight font-variant font-size line-height font-family
これらを一括してするのが font 属性。属性の値を入れていきます。
しかしこれにはルールがあって、「省略出来ないと出来るもの」と「書く順番」です。
省略できないもの font-size と font-family
書き込む順番
1.font-style font-weight font-variant / この3つから使うものを書く
2.font-size line-height / line-heightを入れる場合はfont-sizeの後に/を入れて書く。
3.font-family /フォントを複数指定する場合は、 , で区切って入れる。
例
font:italic bold normal 14px/18px "MS Pゴシック",平成角ゴシック,
font は便利なのですが、必ずフォント名を入れるのが面倒なので、使い勝手が悪いです。
しかし複数を1度に取り込めるので、役に立つ事も多々あるでしょう。
例
font:bold 14px/18px "MS Pゴシック",平成角ゴシック,
font は便利なのですが、必ずフォント名を入れるのが面倒なので、使い勝手が悪いです。
しかし複数を1度に取り込めるので、役に立つ事も多々あるでしょう。
例
font:16px "MS Pゴシック",平成角ゴシック,
font は便利なのですが、必ずフォント名を入れるのが面倒なので、使い勝手が悪いです。
しかし複数を1度に取り込めるので、役に立つ事も多々あるでしょう。
|