Jagged edges on the Droid Serif font only in Chrome on Mac OSX
I'm having a rather strange issue with how Droid Serif (Bold-italic) displays in Chrome on OSX. Basically, if the font appears above the fold, it displays jagged. After it's highlighted, it smooths out. This happens on all pages with the Droid Serif font in Chrome on OSX. Check out the followin开发者_StackOverflow中文版g URL:
http://adamjohnsondesign.com/contact/
What in the world is going on here? Any suggestions? See the images below.
Highlighted with half smooth and half jagged: http://i.min.us/inK36.png
I think what you're experiencing is an @font-face
bug in newer (recent) versions of Chrome on Mac OS X.
For example, I see the jagged edges you're describing when using Chrome 11 and Chrome 12 on Mac OS X.
When I view your page in Chrome 9 on Mac OS X (9.0.597.44) or Chrome 10 on Mac OS X (10.0.648.204) I see the smooth, anti-aliased Droid Serif font as expected.
Since no other browsers seem to exhibit this problem, this leads me to believe it's a font bug in Chrome on OS X.
Moreover, if you select (highlight) text using the Droid Serif font or scroll down the page, the browser redraws the font with smooth edges — this gives further credence to the buggy behavior.
To follow up on this, the issue turned out to be something to do with a custom template I was using within the CMS I use for that site. Other users had reported similar issues with a variety of @font-face fonts. By not using that specific custom template, the issue went away (almost) entirely.
For more information on the subject, check out this thread:
http://www.concrete5.org/community/forums/customizing_c5/interrresting-just-figured-out-c5and039s-auto-nav-block-interfer/#54983
As a note, the answer marked correct in that thread offers a different solution to the problem; however, that was not the solution for my site (I was already doing that).
Thanks to everyone for the help!
精彩评论