font styling effect

[davelf]

is there any js or jquery that help us to style a font,

For example


.fontdefault{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}


that's the usual font-family that already include in OS

what if i use this font:



.fontdswisCNBT{
font-family:swis 721 cn bt;
font-size:11px;
}


that font-family (swis 721 cn bt), is not a regular font that we can find, so we need to download it first.

So how to make other user that don't have that style of font, can still see the same style without downloading the font and install it to their system?

Thx in advanced....

[azoomer]

have you seen http://cufon.shoqolate.com/generate/

[davelf]

yup, i'm using it now, but there's a lot of compress JS, and i want some customization.

But thx anyway...:)

[Beverleyh]

You could also try http://facelift.mawhorter.net/

[davelf]

thx Beverleyh,

Another question here, how to make that font look crisp. Like we design in photoshop? :)

[djr33]

Different operating systems render fonts differently. There's VERY little you can do about this. On a PC they look a bit blockier and crisper, and on a mac a little blurry and smoother. That's the basic idea, though just a rough summary. (Basically mac fonts are [more] anti-aliased; PC fonts aren't [generally].) I don't know about linux, but it's irrelevant because there are many other devices out there: mobile phones, for example.

If you require control over the graphics, you might want to use flash, but that obviously has its own problems (most compatibility, and design/maintenance work).

And if you need COMPLETE control, you'll need to use images. For a site logo (words, but as a graphic), this is fine. If you are using this for all of the text (paragraphs to be read), then that will be very annoying and slow to load, so I'd recommend strongly against it.

[davelf]

thx for the advice djr33, i need to mention this to the client.:)

[azoomer]

Hi Davelf. Yesterday i came across a post on snook.ca (http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master) about @font-face embedding. I tried it out and it works in modern browsers. An easy way to implement this technique is to generate and download a kit from fontsqirrel (http://www.fontsquirrel.com/fontface/generator). It's a little bit cumbersome but once in place it works quite well. I think this is what I will be using in the future. Check it out !

[djr33]

Yes, this will help, but it still won't entirely give you control over how the font is rendered: the same shape will be used, but the mac/pc issues mentioned will still be the same (I believe).
If there is a way around this (I'd like PCs to render like Macs), I'd appreciate an answer for that too.

[davelf]

thx azommer, after more research, try and error in mac and PC. Like djr33 said, the best way if i want to make that font look crisp and follow the style, i must use the image. I already try any suggestion here, but it still not as perfect as we used image.
The problem about smooth and sharp font, i can get a smooth font when using image, not with JS..:)

[azoomer]

Yes i agree the images look better and gives you complete control so it's probably the best solution if you only need it in a few places on your page. Sometimes you run into trouble with png alpha transparency support in IE, if you need that, but that can be fixed as well. Good luck. Hope to see your site when you finish.