「CSSでフォントをちょっとした工夫をして見やすくするver3」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
今回も前回記事[[CSSでフォントをちょっとした工夫をして見やすくするver2]]の続きバージョンです。これを少し実装してみたところ、本当にアンチエイリアスがかかっているのかわからなかったので、一応情報共有という形で執筆します。
~
~
目次
#contents
~
~
----
~
*CSS3のプロパティを使う
**webkit系
**firefox系
*コード
*表示
~
~
*まとめ
~
~
今回も前回記事[[CSSでフォントをちょっとした工夫をして見やすくするver2]]の続きバージョンです。これを少し実装してみたところ、&color(red){本当にアンチエイリアスがかかっているのかわからなかったので、一応情報共有という形で執筆します。}7月31日記事
~
~
目次
#contents
~
~
----
~
*CSS3のプロパティを使う
CSSでアンチエイリアスをかけるプロパティは以下の通りです。現在IEは対応していないようです。
**webkit系
-webkit-font-smoothing: none; /*なし*/
-webkit-font-smoothing: antialiased; /*なめらか*/
-webkit-font-smoothing: subpixel-antialiased; /*デフォルト*/
**firefox系
-moz-osx-font-smoothing: auto;/*デフォルト*/
-moz-osx-font-smoothing: grayscale;/*なめらか*/
*コード
<!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 noantialias">デザインの基本はフォントの見やすさから10px</p>
<p class="size10 antialias">デザインの基本はフォントの見やすさから10px</p>
<p class="size12 noantialias">デザインの基本はフォントの見やすさから12px</p>
<p class="size12 antialias">デザインの基本はフォントの見やすさから12px</p>
<p class="size14 noantialias">デザインの基本はフォントの見やすさから14px</p>
<p class="size14 antialias">デザインの基本はフォントの見やすさから14px</p>
<p class="size16 noantialias">デザインの基本はフォントの見やすさから16px</p>
<p class="size16 antialias">デザインの基本はフォントの見やすさから16px</p>
<p class="size18 noantialias">デザインの基本はフォントの見やすさから18px</p>
<p class="size18 antialias">デザインの基本はフォントの見やすさから18px</p>
<p class="size20 noantialias">デザインの基本はフォントの見やすさから20px</p>
<p class="size20 antialias">デザインの基本はフォントの見やすさから20px</p>
<p class="size22 noantialias">デザインの基本はフォントの見やすさから22px</p>
<p class="size22 antialias">デザインの基本はフォントの見やすさから22px</p>
<p class="size24 noantialias">デザインの基本はフォントの見やすさから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;
}
.noantialias{
-webkit-font-smoothing: none;
-moz-osx-font-smoothing: auto;
}
.antialias {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*表示(chrome44.0)
#image(css.png)
*まとめ
&del(){これ本当にかかってるかなぁ・・・疑問です（笑）}
お。画像にして貼り付けたらなんとなく変化がわかります。
画像にしなかったらあまり変化感じられないなぁと思います。
~
~
*その他リンク
別の方法も紹介します。
+[[CSSでフォントをちょっとした工夫をして見やすくするver1]]
+[[CSSでフォントをちょっとした工夫をして見やすくするver2]]
~
~
以上
