liguofeng29’s blog

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

2016-01-29から1日間の記事一覧

CSS3.0の各種修飾 - サーバフォント使用(@font-face)

@font-face { /* フォント名 */ font-family: CrazyIt; /* フォントのURL(絶対/相対) フォーマット(*.ttf/*.otf) */ /* localが優先される */ src: local("フォント名"), url("url") format("fontformat"); }

CSS3.0の各種修飾 - テキスト関連属性

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title>テキスト関連属性</title> <style type="text/css"> div{ border:1px solid #000000; height: 40px; width: 200px; } </style> </head> <body> text-indent:20pt <div style="text-indent:20pt">テス…</div></body></html>

CSS3.0の各種修飾 - 色表示

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 色表示 </title> <style type="text/css"> div>div{ width: 400px; height: 40px; } </style> </head> <body> <script type="text/javascript"> for (var i = 0; i < 110 ; i++) { document.write("テスト文字"); } <…</body></html>

CSS3.0の各種修飾 - font-size-adjust属性

font種類によって文字の幅が異なったりする。これを解決するために使用するのがfont-size-adjust属性。 ※font-size-adjust属性値は通常フォントのaspect値を設定する。 font種類のaspect値は固定されている。 aspect値 = 小文字xの高さ / フォントサイズ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title></title></meta></head></html>…

CSS3.0の各種修飾 - 文字に影を追加する

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 影を追加する </title> <style type="text/css"> span{ display: block; padding: 8px; font-size:xx-large; } </style> </head> <body> text-shadow:red 5px 5px 2px: <span style="text-shadow:red 5px 5px 2px">…</span></body></html>

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

<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 ゴシック </body></html>