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

今回も前回記事CSSでフォントをちょっとした工夫をして見やすくするver2の続きバージョンです。これを少し実装してみたところ、本当にアンチエイリアスがかかっているのかわからなかったので、一応情報共有という形で執筆します。 7月31日記事

目次

CSS3のプロパティを使う
- webkit系
- firefox系
コード
表示(chrome44.0)
まとめ
その他リンク

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;
}