...

View Full Version : How to styles CSS for text like this



Ne7ven
07-20-2011, 06:12 AM
Hello, Everyone

I have been used CSS for a 6 months but i still got stuck in how to styles CSS for a text look like in Photoshop cross browser, i can not make text thinner and higher look like text in image below, althought, i try to use font-weight in lighter value even 100 value, font-size, letter-spacing, word-spacing ... Please someone experience with styling text in CSS cross browser help me, give me some solutions to fix. Thanks in advance ! Have a nice day !

http://www.mediafire.com/imgbnc.php/bcdeeca0adb23edbca70d542555f71971e9dcb4fd34fdfe0e09541a1861ff4e56g.jpg

vikram1vicky
07-20-2011, 12:47 PM
It is not possible to give all photoshop effect to text with CSS styling....

In CSS only following properties you can set to text:

Font-family
Font-size
Font-weight
text-shadow /*still not supported fully by all browsers*/
color....

Hamza7
07-20-2011, 01:43 PM
I think that there 2 values of font-weight property that look well: normal and bold, other values may have no effects.

Ne7ven
07-20-2011, 07:47 PM
It is not possible to give all photoshop effect to text with CSS styling....

In CSS only following properties you can set to text:

Font-family
Font-size
Font-weight
text-shadow /*still not supported fully by all browsers*/
color....


I think that there 2 values of font-weight property that look well: normal and bold, other values may have no effects.

Font-weight : bold or normal do not make text look narrow and higher like text in my image above, are there another solution ?

butlins
07-21-2011, 12:44 PM
The weights available to you to use depend on what's available in the font. For example, if you use the Yanone Kaffeesatz (http://www.google.com/webfonts/specimen/Yanone+Kaffeesatz) font from Google Web fonts there are four weights to choose from, but no italic, so setting font-weight=200 will use the thinnest version.

The problem you (and all web designers have) is that the fonts available universally, which you can pretty much guarantee will be installed on the computers of the people browsing your site, are pretty limited. All of the standard range of fonts (Arial, Verdana, Trebuchet, Georgia) just come in two weights plus italic versions. These equate to normal and bold (which are equivalent to font-weight=400 and font-weight=700). There's no light or narrow versions, except for Arial Narrow (which is pretty much universal, but is a different font, rather than an instruction to squeeze an existing font like you can in Photoshop).

If you want to use other fonts, you'll need to either use the Google Fonts, which you can embed and use for free, or buy web fonts from somewhere like Typekit.com and assemble the font stacks yourself (the fonts then need to be hosted on your server so that they're accessible to your users).

Hamza7
07-22-2011, 09:50 AM
Font-weight : bold or normal do not make text look narrow and higher like text in my image above, are there another solution ?
So, you may need to use a specific fonts, then use them with CSS3 (currently not supported well in many browsers) see CSS3 Tutorial at w3schools (http://www.w3schools.com/css3/default.asp)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum