フォント


font

 フォント(字体)の設定は、font属性を使って行います。font属性は次の形式で値を設定します。漢字やかなの場合、フォント属性で設定した値が反映されなかったり、意味を持たない場合があります。例えば、italic(斜体)を設定しても反映されません。

font: font-style font-variant font-weight font-size/line-height|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;

 項目が多い場合は、次のfont系属性を利用したほうがわかりやすいです。

fontのサンプル

#p1 {
  font: italic 16px/36px Arial, Sans-serif;
}

An example of "font" property



font-color属性はない!!

 ところで、font-colorという属性はありません。フォントの色を変更するには、color属性を使用します。

color: カラーコードまたはカラー名称
<p><span style="color:red;">font-color</span>という属性はありません。
代わりに<span style="color:blue;">color属性</span>を使用します。</p>

font-colorという属性はありません。代わりにcolor属性を使用します。

 

font-*の使い方

@font-face

 @font-faceは他の属性とは性格が異なります(そのために@が付いています)。これは、ウェブフォントを利用するための属性です。

詳しくはこちら

font-family

 font-familyはオブジェクトに適用するフォントの種類を指定します。指定したフォントがない場合は、適当なフォントが使用されます。ウェブページは、自分の端末以外でも使用(表示)されます。その端末に指定したフォントがない場合、期待した通りに表示されないので注意が必要です。

 自端末でどのようなフォントが利用できるかは、ワードなどでフォントを変えるとき使うダイアログで確認できます。

#p2 {
  font-family: times;
}

Using font-family.


font-size

 font-sizeはフォントの大きさを指定します。

#p3 {
  font-size: 24pt;
}

Using font-size.

 font-sizeはフォントのサイズを値 (pt, px, cm, % ...)として指定できる他、以下の値でも指定することができます。フォントサイズを値で指定する場合の単位は「単位」のページを参照してください。

意味
medium標準サイズ
xx-small
x-small
small
large
x-large
xx-large
smaller現在のサイズより小さくする。
larger現在のサイズより大きくする。
initial初期値(mediumと同じ)
inherit親要素から継承する。

font-size-adjust

font-size-adjustは指定されたフォントが存在しないとき、第二候補のフォントが使用されますが、そのときテキストが見づらくなるのをfont-size-adjustでサイズを調整するのに使います。

#p4 {
  font-family: Batang;
  font-size-adjust: 0.8;
}

batang ばたんぐ


font-stretch

 font-stretchはフォントの幅を調整するのに使います。主要ブラウザはサポートしていません(2014/9)。


font-style

 font-styleはフォントを斜体で表示するのに使います。HTMLの<i>と同じです。ただし、日本語フォントには適用されません。指定できる値はnormal (デフォルト), italic, oblique です。obliqueも結果的にitalicと同じになります。

<p style="font-style: italic;">italic font-style</p>

italic font-style


font-variant

 font-variant属性のsmall-capsは小文字を大文字に変換して表示します。そのとき、小文字部分は小さめのフォントで表示されます。日本語フォントには関係ありません。small-caps以外にnormalが指定できます。

<p style="font-variant: small-caps;">Small-Caps make it Capital font.</p>

Small-Caps make it Capital font.


font-weight

 font-weightはフォントの太さを指定します。ようするにHTMLの<b>や<strong>と同じですが、フォントの太さをより狭くするなど細かな指定ができます。100から900まで100刻みで太さを指定することもできますが、フォントが小さいと見た目は変わりません。

<span style="font-weight: bold;">bold</span><br />
<span style="font-weight: bolder;">bolder</span><br />
<span style="font-weight: lighter;">lighter</span><br />
<span style="font-weight: 100;">100</span><br />

bold
bolder
lighter
100


 

このページの先頭へ戻る