- TOP
- HTML / CSS Web
- ウェブサイトの明朝体フォントにアンチエイリアスが掛かるフォントサイズ
明朝体にアンチエイリアスを掛けて綺麗に見せる的な
ウェブサイトで文字を綺麗に見せたいけど、画像を作るのは面倒くさいなズボラな俺。ディスプレイサイズも大きくなってきているのでこれでいい。きっと大丈夫。良く使うからメモ。
ソースコードと見え方
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; }
ブラウザ毎の見え方
環境
Windows Vista32bit Home Basic SP2
その他
本筋(アンチエイリアスの掛かるフォントサイズ)とは関係ない話だけだけど、:before 疑似要素とcss3の要素がブラウザによっては上手く見えていないだけで、閲覧させるだけなら綺麗に見えるし何ら問題ないんじゃないか。
« html5 ロール(role) アクセシビリティまとめ(未完成) | ホーム | [html] 日付セレクトボックス »
https://pulltab.info/mt/mt-tb.cgi/88