CSS/Chrome "bug": Jagged text
I've been working on the http://tymkrs.com/kits site for some time now and came across a funky text thing that I believe some others are dealing with. But just in case you're working on your website and you're getting some funky text, this is what I found to help!
Before:
It's all jagged, you're wondering what the heck is going on. Is it Windows specific? Chrome specific? Computer specific? And when googling the issue, you end up with two main solutions.
One - enable clear type on your computer, which makes everything look like you have doublevision or that things are kinda fuzzy:
It's like got some reddish shadow to it. You should try it just to see how @_@ it can make you. (I'm on XP) Right click on desktop, properties, appearance, effects, and under "use the following method to smooth edges of screen fonts" - choose clear type. It should enact near immediately.
So I backed up from that option as my eyes are bad enough!
Two - Change the css code portion "-webkit-text-stroke:" to 0.25px. Now default in my css stylesheet was 0.35 after which was a comment "/* Hack to fix thin text in Windows */"
So I changed it to 0.25px and it still looked funky. After some trial and error, I just said, what the heck, I'll put it to 0px:
And after that:
Bam. Ugly font be gone!
@atdiy/@tymkrs