「CSSでフォントをちょっとした工夫をして見やすくするver3」の編集履歴(バックアップ)一覧に戻る

CSSでフォントをちょっとした工夫をして見やすくするver3 - (2015/07/31 (金) 00:52:29) のソース

今回も前回記事[[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]]
~
~
以上