liguofeng29’s blog

個人勉強用ブログだっす。

CSS3.0の各種修飾 - フォント関連属性

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> フォント関連属性 </title>
</head>
<body>
color:#888888:
<span style="color:#888888">テスト文字列</span><br />
color:red:
<span style="color:red">テスト文字列</span><br />
font-family:MS ゴシック
<span style="font-family: 'MS ゴシック'">テスト文字列</span><br />
font-size:20pt:
<span style="font-size:20pt">テスト文字列</span><br />
font-size:xx-large:
<span style="font-size:xx-large">テスト文字列</span><br />
font-stretch:narrower:
<span style="font-stretch:narrower">テスト文字列</span><br />
font-stretch:wider :
<span style="font-stretch:wider">テスト文字列</span><br />
font-style:italic:
<span style="font-style:italic">テスト文字列</span><br />
font-weight:bold:
<span style="font-weight:bold">テスト文字列</span><br />
font-weight:900:
<span style="font-weight:900">テスト文字列</span><br />
text-decoration:blink:
<span style="text-decoration: blink;">テスト文字列</span><br />
text-decoration:underline:
<span style="text-decoration:underline">テスト文字列</span><br />
text-decoration:line-through:
<span style="text-decoration:line-through">テスト文字列</span><br />
font-variant:small-caps :
<span style="font-variant:small-caps">hello</span><br />
text-transform:uppercase:
<span style="text-transform:uppercase">hello</span><br />
text-transform:capitalize:
<span style="text-transform:capitalize">hello</span><br />
line-height:30pt:
<span style="line-height:30pt">テスト文字列</span><br />
letter-spacing:5pt:
<span style="letter-spacing:5pt">hello world</span><br />
letter-spacing:15pt:
<span style="letter-spacing:15pt">hello world</span><br />
word-spacing:20pt:
<span style="word-spacing:20pt">hello world</span><br />
word-spacing:60pt:
<span style="word-spacing:60pt">hello world</span><br />
</body>
</html>

f:id:liguofeng29:20160129213847p:plain