「CSSでフォントをちょっとした工夫をして見やすくするver1」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
文字を綺麗に魅せるコツとしては文字の回りのギザギザ感をみせないことが重要です。
アンチエイリアスがかかっていない状態だと、あまりきれいには見えません。アンチエイリアスを知りたい方は[[photoshopで特定の色を抜いたり消したりする]]を参照。
webkit系の中にはアンチエイリアスがかかるCSSもありますが、今回は別の方法で行っていきたいと思います。7月29日記事
~
~
イメージ（下側がアンチエイリアスかかっています。）
#image(rotate.png)
~
~
目次
#contents
~
~
----
~
*文字を若干回転させるだけで綺麗になる？
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);
}
~
*表示
#image(rotate.png)
12pxあたりから見やすくなり20pxまで見やすさが継続されているようです。
~
*まとめ
文字を若干回転させることでアンチエイリアスがつき、文字が非常に見やすくなります。
~
~
*参考
http://dtp.jdash.info/archives/51924296.html
~
~
以上
文字を綺麗に魅せるコツとしては文字の回りのギザギザ感をみせないことが重要です。
アンチエイリアスがかかっていない状態だと、あまりきれいには見えません。アンチエイリアスを知りたい方は[[photoshopで特定の色を抜いたり消したりする]]を参照。
webkit系の中にはアンチエイリアスがかかるCSSもありますが、今回は別の方法で行っていきたいと思います。7月29日記事
~
~
イメージ（下側がアンチエイリアスかかっています。）
#image(rotate.png)
~
~
目次
#contents
~
~
----
~
*文字を若干回転させるだけで綺麗になる？
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);
}
~
*表示
#image(rotate.png)
12pxあたりから見やすくなり20pxまで見やすさが継続されているようです。
~
*まとめ
文字を若干回転させることでアンチエイリアスがつき、文字が非常に見やすくなります。
~
~
*その他リンク
別の方法も紹介します。
+[[CSSでフォントをちょっとした工夫をして見やすくするver2]]
+[[CSSでフォントをちょっとした工夫をして見やすくするver3]]
*参考
http://dtp.jdash.info/archives/51924296.html
~
~
以上
