Forum Moderators: not2easy

Message Too Old, No Replies

what does the slash do? in font:11px/14px sans-serif;

I've never seen this and I'm curious.

         

cuce

8:48 pm on Dec 30, 2005 (gmt 0)

10+ Year Member



I just came across a site in the css it says:

h3{font:11px/14px verdana, arial, sans-serif;}

what does that mean exactly when there is a slash?
I tried experimenting and I'm not clear on what exactly its doing.

cuce

8:52 pm on Dec 30, 2005 (gmt 0)

10+ Year Member



is it line height?

sorry...;)

Frequent

8:52 pm on Dec 30, 2005 (gmt 0)

10+ Year Member



If I was to guess (and I am just guessing) it would use the first font at the first size if available. If the first font isn't available it would use the next one at the larger size.

I'm only semi-CSS literate. Mostly illiterate really.

Freq---

coho75

8:53 pm on Dec 30, 2005 (gmt 0)

10+ Year Member



In this case the 11px is the font size, and the 14px is the line height.

cuce

8:53 pm on Dec 30, 2005 (gmt 0)

10+ Year Member



if that is line height... I assume there must be a short hand for letter spacing in there as well? How would someone do that?

coho75

8:57 pm on Dec 30, 2005 (gmt 0)

10+ Year Member



I don't believe that is possible in the font shorthand. To control letter spacing you would have to do that seperately.

p
{
letter-spacing: 12px
}

SuzyUK

9:08 pm on Dec 30, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



is it line height?

Yes it sure is :)

Though it's unusual, these days anyway, to see both specified as an explicit px measurement unless the line-height is being used to accommodate a background image, and if the element does contain text then text zoom will break it..

With something like the 11px font-size and 14px line-height (as in the example above), if the font size is 11px that is only leaving 3px of available line-height for the "ascenders and descenders" of letters like l, k, g j etc.. so usually you just see the line-height specified as e.g. 1.5 which means 1.5 times the font size or 150% which means 150% of the font-size (same thing), that way line-height can be used universally

e.g. if you set line-height in the body element to 1.3 or 130% then set an element's font-size, wether the <p> to 11px or <h3> to 26px then they will adjust their line-height to suit, and more gracefully too! imho.

Suzy

<added> got interrupted mid-reply.. hehe, quicker answers in here :)</added>