CSSでフォントをちょっとした工夫をして見やすくするver1 - nicepaper @ ウィキ

文字を綺麗に魅せるコツとしては文字の回りのギザギザ感をみせないことが重要です。アンチエイリアスがかかっていない状態だと、あまりきれいには見えません。アンチエイリアスを知りたい方はphotoshopで特定の色を抜いたり消したりするを参照。 webkit系の中にはアンチエイリアスがかかるCSSもありますが、今回は別の方法で行っていきたいと思います。7月29日記事

イメージ（下側がアンチエイリアスかかっています。）

文字を若干回転させるだけで綺麗になる？
コード
表示
まとめ
その他リンク
参考

文字を若干回転させるだけで綺麗になる？

CSSのtransformプロパティを用いて文字を若干回転させることで文字に疑似アンチエイリアスがかかり、見やすくなってきます。

.antialias {
    transform: rotate(0.028deg);
    -o-transform: rotate(0.028deg);
    -ms-transform: rotate(0.028deg);
    -moz-transform: rotate(0.028deg);
    -webkit-transform: rotate(0.028deg);
}

コード

HTML

 <!DOCTYPE HTML>
 <html>
 <head>
 <link rel="stylesheet" type="text/css" href="reset.css">
 <link rel="stylesheet" type="text/css" href="style.css">
 <meta charset="utf-8">
 <title>アンチエイリアス処理</title>
 </head>
 <body>
 <div id="wrapper">
 	<p class="size10">デザインの基本はフォントの見やすさから10px</p>
 	<p class="size10 antialias">デザインの基本はフォントの見やすさから10px</p>
 	<p class="size12">デザインの基本はフォントの見やすさから12px</p>
 	<p class="size12 antialias">デザインの基本はフォントの見やすさから12px</p>
 	<p class="size14">デザインの基本はフォントの見やすさから14px</p>
 	<p class="size14 antialias">デザインの基本はフォントの見やすさから14px</p>
 	<p class="size16">デザインの基本はフォントの見やすさから16px</p>
 	<p class="size16 antialias">デザインの基本はフォントの見やすさから16px</p>
 	<p class="size18">デザインの基本はフォントの見やすさから18px</p>
 	<p class="size18 antialias">デザインの基本はフォントの見やすさから18px</p>
 	<p class="size20">デザインの基本はフォントの見やすさから20px</p>
 	<p class="size20 antialias">デザインの基本はフォントの見やすさから20px</p>
 	<p class="size22">デザインの基本はフォントの見やすさから22px</p>
 	<p class="size22 antialias">デザインの基本はフォントの見やすさから22px</p>
 	<p class="size24">デザインの基本はフォントの見やすさから24px</p>
 	<p class="size24 antialias">デザインの基本はフォントの見やすさから24px</p>
 </div>
 </body>
 </html>

CSS


  @charset "utf-8";
/* CSS Document */

#wrapper{
	width:500px;
	min-height: 500px;
	padding: 20px;
	margin: 10px auto;
	border: 1px solid #000;
}

p{
	margin-bottom: 20px;
}
.size10{
	font-size:10px;
}
.size12{
	font-size:12px;
}
.size14{
	font-size:14px;
}
.size16{
	font-size:16px;
}
.size18{
	font-size:18px;
}
.size20{
	font-size:20px;
}
.size22{
	font-size:22px;
}
.size24{
	font-size:24px;
}

.antialias {
    transform: rotate(0.028deg);
    -o-transform: rotate(0.028deg);
    -ms-transform: rotate(0.028deg);
    -moz-transform: rotate(0.028deg);
    -webkit-transform: rotate(0.028deg);
}