18 replies [Last post]
Navarone
Navarone's picture
Offline
Enthusiast
Akron, Ohio
Last seen: 14 years 11 weeks ago
Akron, Ohio
Timezone: GMT+5
Joined: 2005-11-29
Posts: 66
Points: 0

Are there any methods for applying alias to text using CSS that is supported across browsers?

The client I am working with is a design add agency and they have choosen Helvetica font for there web site. My understanding is that this is not a standard font supplied with Windows. Short of making images of all the text, is there a way to approximate the alias of text?

What is man that you should be mindful of him!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

font alias css ?

You are looking for the font-family property. Documentation here:

http://www.htmlhelp.com/reference/css/font/font-family.html

Basicly, you put the main font you want to use first, and then the alternatives in order of preference. E.G.

p
{
font-family: helvetica, verdana, arial, sans-serif;
}

Will show helvetica in browsers with access to that font, followed by verdana and arial in descending order, followed by the defined generic sans-serif font, whatever that happens to be, for all your <p></p> elements. The browser will read the list of fonts and apply the first one that is available.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

karinne
karinne's picture
Offline
Enthusiast
Aylmer, QC, Canada
Last seen: 14 years 23 weeks ago
Aylmer, QC, Canada
Timezone: GMT-5
Joined: 2004-01-14
Posts: 291
Points: 0

font alias css ?

Navarone
Navarone's picture
Offline
Enthusiast
Akron, Ohio
Last seen: 14 years 11 weeks ago
Akron, Ohio
Timezone: GMT+5
Joined: 2005-11-29
Posts: 66
Points: 0

font alias css ?

Well yes, I had something similar , but the text looks hard and crisp. I was looking for a way to add alias to it like you would in photoshop.

.casestudy_text {
	font-family: Helvetica, Arial, sans-serif, Trebuchet MS;	
	font-size: 10px;	
	line-height: 1.20em;
	color: white;	
	letter-spacing: 1px;
}

What is man that you should be mindful of him!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

font alias css ?

Image Replacement. A popular one seems to be sifr.

http://www.shauninman.com/plete/2004/04/ifr-revisited-and-revised

Verschwindende wrote:
  • CSS doesn't make pies

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

font alias css ?

If you are talking about anti-aliasing, Macs do this, and Windows XP will do it automatically if "clear type" is enabled. Unfortunately it comes disabled by default.

My windows 2000 home PC has a "smooth screen fonts" setting which appears to enable anti-aliasing, but that may be a function of the graphics card software or hardware. Earlier versions of Windows I don't know about.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

karinne
karinne's picture
Offline
Enthusiast
Aylmer, QC, Canada
Last seen: 14 years 23 weeks ago
Aylmer, QC, Canada
Timezone: GMT-5
Joined: 2004-01-14
Posts: 291
Points: 0

font alias css ?

Navarone wrote:
I was looking for a way to add alias to it like you would in photoshop.

Follow thepineapplehead's link Wink

Navarone
Navarone's picture
Offline
Enthusiast
Akron, Ohio
Last seen: 14 years 11 weeks ago
Akron, Ohio
Timezone: GMT+5
Joined: 2005-11-29
Posts: 66
Points: 0

font alias css ?

That link has to do with a flash replacement technque. I didn't see anything about text other than text inside flash.

It doesn't sound like there is away for css to do anti-aliasing.

What is man that you should be mindful of him!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

font alias css ?

There isn't. CSS doesn't do that, it lets you specify the font to use.

Verschwindende wrote:
  • CSS doesn't make pies

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

font alias css ?

Just to clarify my previous post, there is nothing in CSS that specifies whether a font should have anti-aliasing applied. That's done (or not done) by the user agent (browser), or the O/S.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

font alias css ?

Cleartype isn't anti-aliasing - at least not anti-aliasing to the same standard achieved by OS/X or image manipulation software. Its aimed primarily at LCD displays where it gives big improvements - read more. If you are using IE there is also a ClearType Settings Tuner

One technique to improve the font look is to use a dark grey. That can soften the contrast at the edges of the font to make it look less blocky, although still nowhere near as smooth as text anti-aliased in image manipulation software or OS/X.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

font alias css ?

Chris..S wrote:
Cleartype isn't anti-aliasing - at least not anti-aliasing to the same standard achieved by OS/X or image manipulation software.

You may be right of course. I just sorta drew that conclusion from a note on page 83 of "Bulletproof Web Design" by Dan Cederholm although it doesn't actually say that outright.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

font alias css ?

Microsofts own blurb says its a new whizzbang thing that goes beyond traditional anti-aliasing and font smoothing. However, that sounds like marketting speak for different and not as good Wink

In the end I believe the evidence of my own eyes - an anti-aliased gif of text always looks better than the same thing displayed by the browser, at least on my old CRT monitor. Maybe ClearType does look better than traditionally anti-aliased text on a flat panel.

I have a feeling in Vista, Microsoft will contrive some new marketing speak to explain how the font anti-aliasing it will have really is newer and goes beyond cruddy old ClearType.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

font alias css ?

Aliasing is the effect of jagged edges in smooth curves caused by displays using pixels.

Anything that "smooths" these effects is, by definition, "anti-aliasing".
This is normally done by filtering high-frequency components out of the digital signal. See http://en.wikipedia.org/wiki/Anti-aliasing for further information.

(Earlier incorrect stuff about "dither" edited out to avoid too much public embarrasment) Smile

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Anonymous
Anonymous's picture
Guru

font alias css ?

Ed Seedhouse wrote:
See http://en.wikipedia.org/wiki/Anti-aliasing for further information.
Why are you enclosing your URLs in code tags? :?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

font alias css ?

Triumph wrote:
Ed Seedhouse wrote:
See http://en.wikipedia.org/wiki/Anti-aliasing for further information.
Why are you enclosing your URLs in code tags? :?

Seemed like the right thing to do at the time. A url *is* code, isn't it?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

font alias css ?

In this forum, a fully qualified url, surrounded by a space on either end is clickable, eg., http://www.csscreator.com/ . Within the [code][/code] tags, it isn't. Optionally, you can use the [url=url]text[/url] tags like so:
[url=http://www.csscreator.com/]CSS Creator[/url], which will yield CSS Creator.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

font alias css ?

I love AA, it makes the chainlink fences in HL2 look purdy. AF is also great, I can knock it up to 16x without affecting the FPS.

With a 6600GT, I can get 0xaa. With my 6800gs, I've set it to 2x, could go higher. With a 7800gtx you could go max.

But back on topic Wink CSS doesn't antialias fonts. Flash will, which is why I suggested the sifr days ago.

Verschwindende wrote:
  • CSS doesn't make pies

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

font alias css ?

kk5st wrote:
Optionally, you can use the [url=url]text[/url] tags like so:
CSS Creator, which will yield CSS Creator.

Didn't notice the little URL button and the tool-tip. I agree that's the right way to do it. Since I read left to right, apparantly my brain got to "Code" and stopped there. Smile

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.