| <!DOCTYPE html> |
| |
| <html> |
| <head> |
| <style> |
| .container { |
| display: inline-block; |
| height: 100px; |
| width: 220px; |
| padding: 5px; |
| margin: 10px; |
| border: 1px solid black; |
| box-sizing: border-box; |
| font-family: monospace; |
| } |
| |
| .composited { |
| will-change: transform; |
| } |
| |
| .antialiased { |
| -webkit-font-smoothing: antialiased; |
| } |
| |
| .smoothed { |
| -webkit-font-smoothing: subpixel-antialiased; |
| } |
| </style> |
| <script> |
| if (window.internals) { |
| internals.setFontSmoothingEnabled(true); |
| internals.settings.setSubpixelAntialiasedLayerTextEnabled(true) |
| } |
| </script> |
| </head> |
| <body> |
| |
| <h2>Composited vs. non-composited</h2> |
| <section> |
| <div class="container"> |
| This text should have the normal appearance.<br> a b c d e f g h i j k l m n o p q r s t u v w x y z |
| </div> |
| |
| <div class="composited container"> |
| This text should have the normal appearance.<br> a b c d e f g h i j k l m n o p q r s t u v w x y z |
| </div> |
| </section> |
| |
| <h2>Non-composited: antialiased vs. smoothed</h2> |
| |
| <section> |
| <div class="container antialiased"> |
| This text should look visibly thinner.<br> a b c d e f g h i j k l m n o p q r s t u v w x y z |
| </div> |
| |
| <div class="container smoothed"> |
| This text should have the normal appearance.<br> a b c d e f g h i j k l m n o p q r s t u v w x y z |
| </div> |
| </section> |
| |
| <h2>Composited: antialiased vs. smoothed</h2> |
| |
| <section> |
| <div class="container composited antialiased"> |
| This text should look visibly thinner.<br> a b c d e f g h i j k l m n o p q r s t u v w x y z |
| </div> |
| |
| <div class="container composited smoothed"> |
| This text should have the normal appearance.<br> a b c d e f g h i j k l m n o p q r s t u v w x y z |
| </div> |
| </section> |
| |
| |
| </body> |
| </html> |
