CSS Font Question

Question

What is the difference between this:

font-family: Arial, helevetica; 

and this:

 font: arial/ helvetica; 

I saw both, but not quite sure of the difference?

Answer 1

Is a slash ( / ) typo? Since the only slash I can draw in the font: property is a character indicating the font size and line height (e.g. 16px/20px )

In any case, font: is a property that allows you to set several font properties at once, while font-family , obviously, only allows you to set the font. With font: you can also set the size, bold / italics, line-height and option:

 font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 1em; line-height: 1.5em; font-family: verdana,sans-serif 

Same as:

 font: bold italic small-caps 1em/1.5em verdana,sans-serif; 

You can also omit properties that are already set. For size, family, and bold:

 font: bold 1em arial,verdana; 

Answer 2

Thanks for asking this question.

As @Stephan Muller said , a slash may just be a typo that tries to indicate the font size and line height, however in some cases there may be a slash such fonts:

 font-family: Copperplate / Copperplate Gothic Light, sans-serif; font-family: Gill Sans / Gill Sans MT, sans-serif; 

Hope this helps!

Answer 3

A slash is an abbreviation used to simultaneously set the font size and line height. Therefore, the syntax from the shortened text that you have is incorrect.

 font: 12px/14px Arial, helvetica; 

is the only correct use of the slash. In this example, he will set the font size to 12px, the line height to 14px and the font family Arial, helvetica.