Windows 版 Chrome のアンチエイリアス

xl1

2011-05-21 02:23:48

License: MIT License

Fork: 0

Fav: 3

View: 1513

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 0 lines
HTML 10 lines
CSS 13 lines

Windows 版 Chrome のアンチエイリアス

Windows 版 Chrome のアンチエイリアス

Chrome は text-shadow や transform を加えると文字をアンチエイリアスするが、Windows の ClearType より荒い（標準アンチエイリアス）から、メイリオなど ClearType 前提のフォントは逆に汚くなることがある。参考：http://stackoverflow.com/questions/4046142/google-chrome-text-shadow-rendering まとめ：http://unformedbuilding.com/articles/text-shadow-on-google-chrome/ 2011/7/28 追記: Chrome dev 14.0.835.2 で、どれもアンチエイリアス効かない状態になっているのを確認しました<ul> <li class="bitmap">ビットマップフォント（ＭＳＰゴシック） <li class="bitmap antialiased">ビットマップフォント＋rotate(360deg)でアンチエイリアス <li class="bitmap shadow">ビットマップフォント＋text-shadowでアンチエイリアス <li class="bitmap shadow2">ビットマップフォント＋text-shadow <li class="cleartype">ClearType が効くフォント（メイリオ） <li class="cleartype antialiased">ClearType＋無効化してrotate(360deg)でアンチエイリアス <li class="cleartype shadow">ClearType＋無効化してtext-shadowでアンチエイリアス <li class="cleartype shadow2">ClearType＋無効化せずtext-shadow </ul>ul { font-size: 16px; } .bitmap { font-family: "ＭＳＰゴシック", "MS PGothic"; } .cleartype { font-family: "メイリオ", "meiryo"; } .antialiased { -webkit-transform: rotate(360deg); /*-webkit-font-smoothing: antialiased;*/ } .shadow { text-shadow: 3px 3px 1px pink; } .shadow2 { text-shadow: 0 0 0 transparent, 3px 3px 1px pink; }

Tweet
QR code

QRコード

実行画面をスマートフォンで確認できます。
Embed

デザインビュー
コードビュー
<script type="text/javascript" src="http://jsdo.it/blogparts/bs03/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/xl1/bs03" title="Windows 版 Chrome のアンチエイリアス">Windows 版 Chrome のアンチエイリアス - jsdo.it - share JavaScript, HTML5 and CSS</a></p>
zip