CODEWITHSUNDEEP
javascripthtmlcss
halocursed
halocursed

Reputation: 2485

Anti-aliased text with css/javascript for Large font size?

I am using Large fonts in my website at a few places and they don't appear anti-aliased or smooth... I was wondering if their is any way to show large anti-aliased fonts for browsers on windows OS which has anti-aliasing switched off as default... Similar to something they have on this website here

Upvotes: 1

Views: 2589

Answers (4)

Simon_Weaver
Simon_Weaver

Reputation: 145950

Good news : in IE9 (released 3/14/11) they seem to put much larger text as anti aliased by default. I have hardware acceleration disabled - so it probably has this effect for all users.

Warning: this is an exercise in futility but.... I did notice that the text-shadow css property seems to force anti aliasing in some browsers. Unfortunately I think only Chrome at this time...

Here's a sample... (each heading is shown first normally - and then with a text shadow). Best viewed in Chrome!

Upvotes: 0

Scott
Scott

Reputation:

Cufon is an alternative to sIFR. See comparison here: http://net.tutsplus.com/tutorials/html-css-techniques/six-ways-to-improve-your-web-typography/

Upvotes: 0

Paul Turner
Paul Turner

Reputation: 39625

If the user's OS or browser does not have anti-alias switched on, there's nothing you can do to force either to use it. You can use other rendering platforms like Flash, or using CCS to replace text with images, to allow fonts to be displayed with anti-aliasing, but it does seem like a kludge for something as simple as rendering text. Technologies like Flash will also alienate certain audiences, either whose devices have no support for them or they simply opt out of using them.

If your user does not have AA enabled, arguably they are displaying a preference or simply don't care about the particulars of how the font is rendered. At the end of the day, you simply cannot directly control the client your users will use to consume your website. On the web you will always be at the mercy of the client application. The best you can do is present it clearly and in such a way that it should be easy for users to get the best experience they can achieve with their client.

Don't lose any sleep over whether your pixels are slightly less pretty on one client.

Upvotes: 1

warpech
warpech

Reputation: 6433

You can't control system anti-alias in CSS.

For that, you would have to use Flash text replacement, like sIFR (they are using h2swf)

Upvotes: 4

Related Questions