$B%W%m%Q%F%#(B 'font-style
'
$B%W%m%Q%F%#L>(B | $BCM(B |
font-style | normal | italic | oblique | inherit |
'font-style
' $B$O;RMWAG$K7Q>5$5$l$^$9!#%G%U%)%k%H$NCM$O!"(Bnormal
$B$G$9!#(Binherit
$B$O!"?FMWAG$NCM$rL@<(E*$K7Q>5$9$k;XDj$G$9!#(B
$B%U%)%s%H%U%!%_%j!<$K!"%$%?%j%C%/$d%*%V%j!<%/$,B8:_$9$l$P!"3:Ev$9$k%U%)%s%H$,;H$o$l$^$9!#%$%?%j%C%/$O!"l9g$O!"I8=`%U%)%s%H$r79$1$?$@$1$N$b$N$,;H$o$l$^$9!#(B
'Helvetica' $B$N>l9g(B
normal | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
italic | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
oblique | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
'Times New Roman' $B$N>l9g(B
normal | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
italic | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
oblique | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
font-variant
$B%W%m%Q%F%#(B 'font-variant
' $B$O!"%;%l%/%?$K%^%C%A$7$?BP>]$N%U%)%s%H!&%U%!%_%j!<$N!">.J8;z(B(normal)$B!?%9%b!<%k%-%c%W%9(B(small-caps)$B$N6hJL$r;XDj$7$^$9!#(B
$B%W%m%Q%F%#(B 'font-variant
'
$B%W%m%Q%F%#L>(B | $BCM(B |
font-variant | normal | small-caps | inherit |
'font-variant
' $B$O;RMWAG$K7Q>5$5$l$^$9!#%G%U%)%k%H$NCM$O!"(Bnormal
$B$G$9!#(Binherit
$B$O!"?FMWAG$NCM$rL@<(E*$K7Q>5$9$k;XDj$G$9!#(B
$BCM$K(B small-caps
$B$r;XDj$9$k>l9g!"%U%)%s%H%U%!%_%j!<$K!"%9%b!<%k%-%c%W%9%U%)%s%H$,B8:_$9$l$P!"3:Ev$9$k%U%)%s%H$,;H$o$l$^$9!#B8:_$7$J$$>l9g$O!"DL>o$NBgJ8;z$r;H$C$?$j!"BgJ8;z$r>.J8;z$N9b$5$K$7$FI=<($7$^$9!#(B
address { font-variant: small-caps }
sans-serif $B$N>l9g(B
normal | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
small-caps | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
serif $B$N>l9g(B
normal | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
small-caps | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
font-weight
$B%W%m%Q%F%#(B 'font-weight
' $B$O!"$=$3$G;H$o$l$F$$$k%U%)%s%H$N!"%0%j%U$N@~$NB@$5$r;XDj$7$^$9!#(B
$B%W%m%Q%F%#(B 'font-weight
'
$B%W%m%Q%F%#L>(B | $BCM(B |
font-weight | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit |
'font-weight
' $B$O;RMWAG$K7Q>5$5$l$^$9!#%G%U%)%k%H$NCM$O!"(Bnormal
$B$G$9!#(Binherit
$B$O!"?FMWAG$NCM$rL@<(E*$K7Q>5$9$k;XDj$G$9!#(B
$B?tCM$G;XDj$9$k>l9g$O!"(B100-900 $B$NHO0OFb$G(B 100 $BHt$S$G;XDj$7!"?t;z$,Bg$-$$J}$,B@$/$J$j$^$9!#(Bnormal
$B$,(B 400
$B$HF1$8$G!"(Bbold
$B$O(B 700
$B$HF1$8$G$9!#(Bbolder
$B$O!"7Q>5$7$?CM$HF1$8$+$=$l$h$j$bB@$/!"(Blighter
$B$O!"7Q>5$7$?CM$HF1$8$+$=$l$h$j$b:Y$/$J$j$^$9!#(B
strong { font-weight: bolder }
sans-serif $B$N>l9g(B
100 | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
400 | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
700 | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
900 | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
serif $B$N>l9g(B
100 | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
400 | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
700 | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
900 | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
font-stretch
$B%W%m%Q%F%#(B 'font-stretch
' $B$O!"$=$3$G;H$o$l$F$$$k%U%)%s%H$N!"%0%j%U$NI}$r;XDj$7$^$9!#(B
$B%W%m%Q%F%#(B 'font-stretch
'
$B%W%m%Q%F%#L>(B | $BCM(B |
font-stretch | normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit |
'font-stretch
' $B$O;RMWAG$K7Q>5$5$l$^$9!#%G%U%)%k%H$NCM$O!"(Bnormal
$B$G$9!#(Binherit
$B$O!"?FMWAG$NCM$rL@<(E*$K7Q>5$9$k;XDj$G$9!#(B
$BJ8;z$NI}$N69$$=g$KJB$Y$k$H!"
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- normal
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
wider
/narrower
$B$N>l9g$O!"7Q>5$7$?CM$HF1$8$+$=$l$h$j$b9-$/!?69$/$J$j$^$9!#(B
h2 { font-stretch: extra-expanded }
sans-serif $B$N>l9g(B
ultra-condensed | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
condensed | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
normal | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
expanded | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
ultra-expanded | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
serif $B$N>l9g(B
ultra-condensed | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
condensed | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
normal | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
expanded | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
ultra-expanded | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
$B$3$N;XDj$,M-8z$K$J$k%V%i%&%6!"%f!<%6%(!<%8%'%s%H$O!"B8:_$7$J$$$b$N$H;W$o$l$^$9!#(B
font-size
$B%W%m%Q%F%#(B 'font-size
' $B$O!"$=$3$G;H$o$l$F$$$k%U%)%s%H$NBg$-$5$r;XDj$7$^$9!#(B
$B%W%m%Q%F%#(B 'font-size
'
$B%W%m%Q%F%#L>(B | $BCM(B |
font-size | <absolute-size> | <relative-size> | <length> | <percentage> | inherit |
'font-size
' $B$O;RMWAG$K7Q>5$5$l$^$9!#%G%U%)%k%H$NCM$O!"(Bmedium
$B$G$9!#(Binherit
$B$O!"?FMWAG$NCM$rL@<(E*$K7Q>5$9$k;XDj$G$9!#(B
<absolute-size>
- $B%-!<%o!<%I;XDj$G%f!<%6%(!<%8%'%s%H0MB8$N%U%)%s%H%5%$%:$r;XDj$7$^$9!#$H$j$&$kCM$O!"[ xx-small | x-small | small | medium | large | x-large | xx-large ]
<relative- size>
- $BL5;XDj$NCM$h$j$bBg$-$$!?>.$5$$$r;XDj$G$-$^$9!'(B
[ larger | smaller ]
<length>
- $B@5?t$GD9$5$r;XDj$G$-$^$9!#;XDj$G$-$kC10L$O!"JL9`$G@bL@$7$F$$$^$9!#Ii$N?t$OIT@5$G$9!#(B
<percentage>
- $B7Q>5$7$?%U%)%s%H$N%5%$%:$r(B 100% $B$H$7$F7W;;$7$^$9!#(B120% $B$O(B 1.2em $B$HEy2A$G$9!#Ii$N?t$OIT@5$G$9!#(B
h1 { font-size: xx-large }
h2 { font-size: x-large }
h3 { font-size: large }
h4,h5,h6 { font-size: medium }
strong { font-size: larger }
li { font-size: .9em }
th,dt { font-size: 110% }
$B0lHLE*$K$O!"%U%)%s%H$N%5%$%:$O!"%-!<%o!<%I;XDj!"(Bem
$BC10L;XDj!"(B%
$B;XDj$N2?$l$+$,9%$^$l$^$9!#%V%i%&%6$N@_Dj$GJ8;z$NBg$-$5$r4JC1$KJQ99$G$-$k$?$a!"%"%/%;%7%S%j%F%#$N4QE@$G9%$^$7$$$+$i$G$9!#$=$NH?LL!"%G%6%$%s$r8GDj$G$-$J$$$H$$$&%G%a%j%C%H$b$"$j$^$9!#(B
$B$-$a:Y$+$$%G%6%$%s$N;XDj$K$O!"(Bpx
$BC10L$,JXMx$G$9$,!"%V%i%&%6$GJ8;z$NBg$-$5$rJQ99$G$-$J$$$H$$$&%G%a%j%C%H$b$"$j$^$9!#$?$@$7!"==J,Bg$-$J%5%$%:$r;XDj$7$F$*$1$P!"%G%6%$%s$,8GDj$G$-$k$N$G!"7k2L$H$7$FFI$_$d$9$/$J$k$3$H$b9M$($i$l$^$9!#(B
$B@dBPC10L!J(Bpt
, in
$B$J$I!K$O!"%&%'%V%Z!<%8$K;H$&%a%j%C%H$,KX$I$"$j$^$;$s!#=PNO%a%G%#%"$,FCDj$G$-$k>l9g$r=|$$$F$O!";H$&$Y$-$G$O$J$$$H$$$($^$9!#(B
sans-serif $B$N>l9g(B
.8em | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
1em | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
1.2em | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
small | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
large | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
serif $B$N>l9g(B
.8em | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
1em | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
1.2em | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
small | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
large | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
font-size-adjust
$B%W%m%Q%F%#(B 'font-size-adjust
' $B$O!"$=$3$G;H$o$l$F$$$k%U%)%s%H$N%"%9%Z%/%HCM$r;XDj$7$^$9!#%"%9%Z%/%HCM$H$O!"BgJ8;z$H>.J8;z$N9b$5$NHfN($r0UL#$7$^$9!#(B
$B%W%m%Q%F%#(B 'font-size-adjust
'
$B%W%m%Q%F%#L>(B | $BCM(B |
font-size-adjust | <number> | none | inherit |
'font-size-adjust
' $B$O;RMWAG$K7Q>5$5$l$^$9!#%G%U%)%k%H$NCM$O!"(B'font-size
' $B$@$1$G%U%)%s%H$NBg$-$5$r;XDj$9$k(B none
$B$G$9!#(Binherit
$B$O!"?FMWAG$NCM$rL@<(E*$K7Q>5$9$k;XDj$G$9!#(B
<number>
$B$O!"MxMQ2DG=$J%U%)%s%H$KE,MQ$9$k%"%9%Z%/%HCM$r?tCM$G;XDj$7$^$9!#:G=i$K;XDj$5$l$?%U%)%s%H$N(B 'font-size
' $B$NCM$r(B y$B!":G=i$K;XDj$5$l$?%U%)%s%H$N%"%9%Z%/%HCM$r(B a
$B!"font-size-adjust' $B$NCM!K$r(B a'$B!"MxMQ2DG=$J%U%)%s%H$N%U%)%s%H%5%$%:$r(B c $B$H$9$k$H!"(Bc $B$O
y(a/a') = c
where:
y = 'font-size' of first-choice font
a' = aspect value of available font
c = 'font-size' to apply to available font
$BNc$($P!"(B'font-size
' $B$r(B 14px $B$G(B Verdana $B!J%"%9%Z%/%HCM$O(B0.58$B!K$r;XDj$7$F$$$k>l9g!"(BVerdana $B$,MxMQ$G$-$:!"(B'font-size-adjust
' $B$NCM!JMxMQ2DG=$J%U%)%s%H$N%"%9%Z%/%HCM!K$r(B 0.58 $B$K;XDj$7$F$$$k>l9g!"BeBX%U%)%s%H$N%"%9%Z%/%HCM$,(B 0.46 $B$G$"$l$P!"
p { font-family: 'Verdana', 'Times New Roman';
font-size: 1em; font-size-adjust: .56 }
'font-size-adjust' $B;XDj$"$j(B | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
'font-size-adjust' $B;XDj$J$7(B | The quick brown fox jump
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 |
$BBgJ8;z$H>.J8;z$r;}$D%U%)%s%H$N>l9g!"J8;z$NFI$_$d$9$5$N4QE@$G$O!"(B'font-size-adjust
' $B;XDj$O!"8+1I$(>e$NF1$8Bg$-$5$r3NJ]$9$k$?$a$K!"Hs>o$KM-0U5A$G$9!#F1$8(B 'font-size
' $B$G$b!"%"%9%Z%/%HCM$,0[$J$k%U%)%s%H4V$G$O!"BN46E*$JJ8;z$NBg$-$5$K1@E%$N:9$,$"$k$3$H$O$h$/CN$i$l$F$$$^$9!#(B
Mozilla $B$G$OM-8z$G$9$,!";DG0$J$,$i!"B>$K$3$N;XDj$,M-8z$J%V%i%&%6!"%f!<%6%(!<%8%'%s%H$rCN$j$^$;$s!#(B
font
$B%W%m%Q%F%#(B 'font
' $B$O!"%U%)%s%H4XO"$N>JN,%W%m%Q%F%#$G$9!#(B
'font
' $B$O;RMWAG$K7Q>5$5$l$^$9!#%G%U%)%k%H$NCM$O!"3F!9$N%W%m%Q%F%#$GDj5A$5$l$?CM$K=>$$$^$9!#(Binherit
$B$O!"?FMWAG$NCM$rL@<(E*$K7Q>5$9$k;XDj$G$9!#(B
$B>JN,%W%m%Q%F%#(B
$B%-!<%o!<%I$G;XDj$5$l$k%7%9%F%`%U%)%s%H$r;XDj$7$J$$>l9g!"
<'font-style'> || <'font-variant'> || <'font-weight'> ]?
<'font-size'> [ / <'line-height'> ]? <'font-family'>
$B$3$l$i$N;XDj$O!"%7%9%F%`%U%)%s%H$N%-!<%o!<%I;XDj$HGSB>E*$G$9!#%7%9%F%`%U%)%s%H$r;XDj$9$k5!2q$O$a$C$?$K$J$$$G$7$g$&$+$i!"DL>o$O!"$3$N%7%s%?%C%/%9$r3P$($F$$$l$P==J,$@$H$$$($^$9!#(B
# | $B%W%m%Q%F%#(B | $B35MW(B | $BI,MW@-(B |
1 | font-style | $B%U%)%s%H$N%9%?%$%k!#(B1$B!A(B3$B$O=gITF1(B | $BG$0U(B optional |
2 | font-variant | $B%U%)%s%H$N%P%j%(!<%7%g%s!#(B1$B!A(B3$B$O=gITF1(B | $BG$0U(B optional |
3 | font-weight | $B%U%)%s%H$NB@$5!#(B1$B!A(B3$B$O=gITF1(B | $BG$0U(B optional |
4 | font-size | $B%U%)%s%H$NBg$-$5!#(B | $BI,?\(B required |
5 | line-height | $B9T$N9b$5!#;XDj$9$k>l9g$OCM$ND>A0$K%9%i%C%7%e$,I,?\(B | $BG$0U(B optional |
6 | font-family | $B%U%)%s%H$N%U%!%_%j! | $BI,?\(B required |
$B$3$3$G8+$k$h$&$K!"(B'font-stretch
', 'font-size-adjust
' $B$O!">JN,%W%m%Q%F%#(B 'font
' $B$G$O;XDj$G$-$^$;$s!#(B
/* 'font-style', 'font-weight' $B$,(B normal
'font-variant' $B$,(B small-caps
'font-size' $B$,(B 1.2em
'line-height' $B$,(B 1.3 $BG\(B
'font-family' $B$O(B serif */
address { font: normal small-caps 1.2em/1.3 serif }
/* 'font-style' $B$,(B oblique
'font-size' $B$,(B 12px
'font-family' $B$,(B 'Helvetica', sans-serif
$BB>$N%W%m%Q%F%#$O=i4|CM(B
'font-stretch' $B$O(B condensed */
td { font: oblique 12px 'Helvetica', sans-serif; font-stretch: condensed }
$B%7%9%F%`%U%)%s%H(B
$B8DJL$N%U%)%s%H$N%W%m%Q%F%#$r;XDj$;$:$K!"%7%9%F%`%U%)%s%H$H8F$P$l$k(B OS $B$K%G%U%)%k%H$N%U%)%s%H$r;XDj$9$k$3$H$,$G$-$^$9!#(B
- caption
- $B%\%?%s$d%I%m%C%W%@%&%s$J$I$N%-%c%W%7%g%s@)8f$K;HMQ$5$l$k%U%)%s%H!#(B
- icon
- $B%"%$%3%s$N%i%Y%k$K;HMQ$5$l$k%U%)%s%H!#(B
- menu
- $B%I%m%C%W!&%@%&%s!&%a%K%e!<$d%a%K%e!
- message-box
- $B%@%$%"%m%0!&%\%C%/%9$K;HMQ$5$l$k%U%)%s%H!#(B
- small-caption
- $B%9%b!<%k@)8f$r%i%Y%k$9$k$?$a$K;HMQ$5$l$k%U%)%s%H!#(B
- status-bar
- $B%&%#%s%I%&!&%9%F!<%?%9!&%P!<$K;HMQ$5$l$k%U%)%s%H!#(B
Copyright © 2004 SUGAI, Manabu. All rights reserved.
2004-06-20 published.