今回も前回記事CSSでフォントをちょっとした工夫をして見やすくするver2の続きバージョンです。これを少し実装してみたところ、
本当にアンチエイリアスがかかっているのかわからなかったので、一応情報共有という形で執筆します。
7月31日記事
目次
CSSでアンチエイリアスをかけるプロパティは以下の通りです。現在IEは対応していないようです。
-webkit-font-smoothing: none; /*なし*/ -webkit-font-smoothing: antialiased; /*なめらか*/ -webkit-font-smoothing: subpixel-antialiased; /*デフォルト*/
-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; }
これ本当にかかってるかなぁ・・・疑問です(笑)
お。画像にして貼り付けたらなんとなく変化がわかります。
画像にしなかったらあまり変化感じられないなぁと思います。
別の方法も紹介します。