CSS font declaration question

whats the difference between this:开发者_Python百科

font-family: Arial, helevetica;

and this:

font: arial/ helvetica;

I've seen both but not really sure of the difference?

---

Is the slash (/) a typo? Because the only slash I can image in the font: property is the one denoting font-size and line-height (e.g. 16px/20px)

Anyway, font: is the property that lets you set several font properties at once, whereas font-family obviously only lets you set the font face. With font: you can also set size, bold/italic, line-height and variant:

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

Is the same as:

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

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

font: bold 1em arial,verdana;

---

Thanks for asking this question.

As @Stephan Muller said the slash could just be a typo trying to denote the font-size and line-height, however there can also be a slash in some fonts like these:

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

Hope this helps!

---

The slash is a shorthand used to set font size and line height at the same time. So, the syntax is of the shorthand you have is incorrect.

font: 12px/14px Arial, helvetica;

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