var $text = $(".text"), $td = $("td"); function detectWebkit() { if ($.browser.webkit) { $('.mozilla-warning').hide(); } } function update() { $td.text($text.val()); } $text.on("keyup", update); update(); detectWebkit();
body { padding: 40px; } h1 { font-size: 1.5em; } p { font-family: sans-serif; margin: 10px 0; } .mozilla-warning { font-weight: bold; } .note { color: #777; font-size: 0.75em; } .text { font-family: sans-serif; font-size: 0.8em; padding: 10px 20px; color: #16d; width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 2px; border: 1px solid #ccc; box-shadow: inset 0px 1px 4px 0px rgba(0,0,0,0.2) } table td, table th { font-family: sans-serif; border: 1px solid #ccc; padding: 10px 20px; font-size: 0.75em; } .blues { color: #27d; } .reds { color: #b21; } .grays { color: #555; } .none-smoothing { -webkit-font-smoothing: none; } .antialiased-smoothing { -webkit-font-smoothing: antialiased; } .subpixel-smoothing { -webkit-font-smoothing: subpixel-antialiased; }
<h1>-webkit-font-smoothing Interactive Demo</h1> <p> Webkit-based browsers only (Safari, Chrome): type in text and see it rendered in 3 different rendering strategies. <span class="mozilla-warning">This may not work for you---are you using Firefox?</span> </p> <p> <input type="text" class="text" value="Type something you will."> <p> <table> <tr> <th>none</th> <td class="none-smoothing blues"></td> </tr> <tr> <th>antialiased</th> <td class="antialiased-smoothing blues"></td> </tr> <tr> <th>subpixel-antialiased</th> <td class="subpixel-smoothing blues"></td> </tr> <tr> <th>none</th> <td class="none-smoothing reds"></td> </tr> <tr> <th>antialiased</th> <td class="antialiased-smoothing reds"></td> </tr> <tr> <th>subpixel-antialiased</th> <td class="subpixel-smoothing reds"></td> </tr> <tr> <th>none</th> <td class="none-smoothing grays"></td> </tr> <tr> <th>antialiased</th> <td class="antialiased-smoothing grays"></td> </tr> <tr> <th>subpixel-antialiased</th> <td class="subpixel-smoothing grays"></td> </tr> </table> <p class="note"> As was pointed out to me by a colleague, there has been a very long discussion about the <a href="http://code.google.com/p/chromium/issues/detail?id=152304#c10" target="_blank">webkit-font-smoothing bug</a>. </p>