Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to styles CSS for text like this

    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 !


  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    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....

  • #3
    New Coder
    Join Date
    Jun 2011
    Location
    Algeirs,Algeria
    Posts
    43
    Thanks
    5
    Thanked 3 Times in 3 Posts
    I think that there 2 values of font-weight property that look well: normal and bold, other values may have no effects.

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vikram1vicky View Post
    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....
    Quote Originally Posted by Hamza7 View Post
    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 ?

  • #5
    Regular Coder
    Join Date
    Aug 2006
    Location
    Cardiff, UK
    Posts
    141
    Thanks
    15
    Thanked 2 Times in 2 Posts
    The weights available to you to use depend on what's available in the font. For example, if you use the 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).
    If anyone asks my boss, this counts as work, okay?

  • #6
    New Coder
    Join Date
    Jun 2011
    Location
    Algeirs,Algeria
    Posts
    43
    Thanks
    5
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by Ne7ven View Post
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •