フォント

フォントの使い分け、サイズや行間の設定などの属性

▼フォントの指定(font-family)

・フォント(書体)を指定する属性です (ブラウザ依存/すべて/する)
・「font」タグのfamilyと基本的には同じです。ただし「font」タグは将来廃止されます

「font-family:@@;」

フォント名による指定
・フォント名を直接指定します
・「,」で区切れば、複数のフォントの指定もできます。その場合、表示を希望するフォントから順に左に書きます
　第一希望のフォントが見る人のPCになかったら、その右のフォントが表示されます
・フォント名は正確に記述しなければなりません
　大文字小文字もきちんと使い分けてください (例:「times」の場合は正確に「Times」と書く)
　フォント名の間にスペースがある場合も同じです (例:「MSゴシック」は正確に「ＭＳ　ゴシック」と書く)
　スペースをあける場合はフォント名を「'」でくくらなければなりません

一般名による指定
・一般名とは、よく似たフォントをカテゴリー分けしたもののことをいいます
　指定した一般名の中の1つのフォントが選択され表示されます
・一般名によってはNNでは表示されないのもあるようです(IEでは問題ありません)

・主なフォント名(右)と一般名(「」内)として
「serif」 Times New Roman,Garamond,MS Georgiaなど
「sans-serif」 MS Trebuchet,MS Arialなど
「cursive」 Adobe Poetica,Sanvitoなど
「fantasy」 Alpha Geometrique,Critterなど
「monospace」 Courier,MS Courier Newなど

ex:
This is Times New Roman　This is Times New Roman
複数のフォントの指定です　複数のフォントの指定です

▼文字の大きさの指定(font-size)

・文字の大きさを指定する属性 (medium/すべて/する)
・属性の指定方法は4種類あるので目的に合わせて使い分けるようにしましょう

「font-size:@@;」

任意の数値と単位任意の大きさを指定できる

キーワードによる指定
「xx-small , x-small , small , medium , large , x-large , xx-large」
この順で大きくなっていきます。正式には1.2倍ずつ大きくなることになっていますが、実際はあいまいです

相対サイズによる指定
「larger , smaller」
こちらのキーワードはある要素に対する相対サイズの指定となります
IEとNNではこの要素の解釈が違うため注意してください
IEではユーザーが設定している文字サイズに対しての相対サイズとなります
NNでは親要素で指定されている文字の大きさに対しての相対サイズとなります

%による指定任意に相対的なサイズを指定できます

ex:
文字サイズを15ptにしました　文字サイズを15ptにしました
相対的に文字を大きくしています　相対的に文字を大きくしています

▼文字の太さを指定(font-weight)

・文字の太さを指定する属性です (normal/すべて/する)

「font-weight:@@:」

キーワードによる指定
100から900までの数値を100刻みで指定します（それ以外の数値は無効）。数値が増えるごとに太くなります
フォントによっては数値に応じた太さがない場合もあり、9段階の太さがあるということではありません

bold
文字が太く表示されます。上の700と同じ太さです。特に文字を太くしたいだけでしたらこれを使いましょう

相対値による指定
「bolder , lighter」
bolderは一段階太く、lighterは一段階細くなります。要素に対する相対的なサイズとなります

normal
初期値です。キーワードの400と同じ太さです

ex:
太さを900に指定しました　太さを900に指定しました
太さはBOLD(700)です　太さはBOLD(700)です
相対的に細くしました　相対的に細くしました

▼行送りを調整する(line-height)

・行送りを調整する属性 (normal/すべて/する)

「line-height:@@;」

任意の数値と単位
行の上のラインから次の行の上のラインまでの幅を任意の数値で指定
例えば文字サイズが15ptのときに15ptを指定すると行間はなくなります

相対値による指定
親要素で決められた行間に対して相対的に行間を指定
比率は数値かパーセントで指定します
パーセントではその比率は継承されていき、数値では継承されずに文字サイズに応じて行間が変わります
normal
初期値。行間は自動的に決定される

ex:

行間を20ptに設定しました
こんな感じの行間になります

行間を20ptに設定しました こんな感じの行間になります

▼文字を斜体にする(font-style)

・文字を斜体(イタリック)にする属性 (normal/すべて/する)
・「italic」と「oblique」は表示がよく似ていますが厳密には違います。しかし普通のブラウザでは差はありません
　NNでは「oblique」は対応していないため、通常は「italic」を使いましょう

「font-style:@@;」
italic 文字を斜体にする
oblique 文字を斜体にする
normal 初期値

ex:
文字を斜めにします　文字を斜めにします

▼スモールキャップ文字を使う(font-variant)

・スモールキャップ文字を使うための属性 (normal/すべて/する)
・スモールキャップ文字とは大文字でありながら大きさが小さい文字のことです
　これを使うと小文字も大文字に変換され、また通常の大文字より小さいフォントサイズになります
・NNでは対応していません

「font-variant:@@;」
small-caps スモールキャップ文字に変換
normal 初期値。通常の文字

ex:
small caps文字です　small caps

▼文字属性を一括して設定する(font)

・フォントに関する属性を一括して設定するための属性 (各属性の初期値/すべて/する)
・これを使えばフォントに関する設定をまとめられるので便利です
・各属性の値を省略した場合はそれぞれの初期値が適用されます
・line-heightはfont-sizeのあとに「/」をつけて値を指定します
・font-sizeとfont-familyの値は必ず設定しなければなりません
・font-style, font-variant, font-weightの順番は任意です
・NNでは対応していません

「font: 1 2 3 4/5 6 ; 」
1- font-styleの値 (斜体)
2- font-variantの値 (スモールキャップ)
3- font-weightの値 (太さ)
4- font-sizeの値 (大きさ)
5- line-heightの値 (行間)
6- font-familyの値 (フォント名)

ex:
文字属性を一括して設定しています
文字属性を一括して設定しています

[ → BACK ]