1. 現在位置:
  2. トップページ
  3. HP作成tips
  4. stylesheet
  5. フォントに関する設定
フォントを一度に指定 |  斜体文字 |  スモールキャップ |  文字の太さ |  文字の大きさ |  行の高さ |  フォントを指定 |  影文字 | 
font フォントに関する設定
斜体、スモールキャップ、太さ、サイズ、行間、フォントを一度に指定
p {
font: italic normal bold 80%/150% "MS Pゴシック";
}

あああaaaaa

font-style 斜体文字(またはイタリック)を指定
p {
font-style: italic;
}

あああaaaaa

italic (イタリック体にする)
normal (標準)デフォルト
font-variant スモールキャップ(スモールキャピタル)を指定
このプロパティの値に small-caps を指定すると、アルファベットの小文字が小さめの大文字で表示される
p {
font-variant: small-caps;
}

あああaaaaa

small-caps (スモールキャップを指定)
normal (標準)デフォルト
font-weight 文字の太さを指定
p {
font-weight: bold;
}

あああaaaaa

bold (太字にする)
normal (標準)デフォルト
font-size 文字の大きさを指定
p {
font-size: 80%; /*数値+単位(em、pt、他)か %(割合)で指定*/
}

あああaaaaa

line-height 行の高さを指定
p {
line-height: 1.5em;
}

あああ
aaaaa

数値+単位(pt、em、他)、数値(単位なし)、%(割合)などで指定
デフォルトは normal(自動)(例:line-height: normal)
font-family フォントを指定
p {
font-family: "MS Pゴシック";
}

あああaaaaa

・フォント名で指定
"MS Pゴシック" または 'MS Pゴシック'
・フォントの種類で指定
sans-serif ゴシック体系
serif 明朝体系
cursive 筆記体系
fantasy 装飾系
monospace 等幅系
影文字
 
<span style="font-size:28pt;width:100%;filter:dropshadow(color=silver,offx=5,offy=5,positive=1)">Sample</span>
Sample color=silver 影の色
offx=5 影のX座標
offy=5 影のY座標
positive=1 効果

<span style="font-size:28pt;width:100%;filter:dropshadow(color=red,direction=135)">Sample</span>
Sample color=red 影の色
direction=135 影を表示したい方向(角度)

<span style="font-size:28pt;width:100%;filter:blur(add=1,direction=135,strength=20)">Sample</span>
Sample add=1 効果
direction=135 同軸の軌跡を表示したい方向(角度)
strength=20 効果の強さ

<span style="font-size:28pt;width:100%;filter:flipH()">Sample</span>
Sample 鏡文字効果が適用されます

<span style="font-size:28pt;width:100%;filter:flipV()">Sample</span>
Sample 逆さ文字効果が適用されます

<span style="font-size:28pt;width:100%;filter:glow(strength=5,color=gold)">Sample</span>
Sample 光効果が適用されます
strength=5 光の強さ
color=gold 光の色
効果を適用させるためには最低でもwidthを入れなければなりません