1. TOP
  2. HTML / CSS Web
  3. ウェブサイトの明朝体フォントにアンチエイリアスが掛かるフォントサイズ

ウェブサイトの明朝体フォントにアンチエイリアスが掛かるフォントサイズ

カテゴリ:
HTML / CSS
Web
| トラックバック(0)
投稿者:yo yo

120718devicefont-size01.jpg

明朝体にアンチエイリアスを掛けて綺麗に見せる的な

ウェブサイトで文字を綺麗に見せたいけど、画像を作るのは面倒くさいなズボラな俺。ディスプレイサイズも大きくなってきているのでこれでいい。きっと大丈夫。良く使うからメモ。

ソースコードと見え方

HTML

デバイスフォント、サイズ32px以上で明朝体にアンチエイリアスがかかる

CSS

#content h1 {
	font-family: "MS P明朝","MS PMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HGS明朝E",serif;
	font-size:23px;
	font-weight:normal;
	text-shadow:1px 1px 1px #ccc;
/*ここから装飾*/
	margin:0 0 10px;
	padding:5px 10px;
	border:1px solid #E0DCD8;
	background: url(h1_gradient_example_bg.gif) top repeat-x #eee;
	background: -moz-linear-gradient(top, #ffffff, #eeeeee);
	background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#eeeeee));
	background: -o-gradient(linear, center top, center bottom, from(#ffffff), to(#eeeeee));
}

#content h1:before {
	content: " ";
	padding: 0 0 0 10px;
	border-left: 5px solid #BF627F;
	line-height: 1.4;
}

ブラウザ毎の見え方

120718devicefont-size02.jpg

環境

Windows Vista32bit Home Basic SP2

その他

本筋(アンチエイリアスの掛かるフォントサイズ)とは関係ない話だけだけど、:before 疑似要素とcss3の要素がブラウザによっては上手く見えていないだけで、閲覧させるだけなら綺麗に見えるし何ら問題ないんじゃないか。

« html5 ロール(role) アクセシビリティまとめ(未完成) | ホーム | [html] 日付セレクトボックス »

トラックバック

http://pulltab.info/mt/mt-tb.cgi/88
ページの先頭に戻る