Difference between "font-family" and font-family?

Question

I just discovered that my Chrome will treat font-family: "sans-serif" and font-family: sans-serif differently (it will choose different fonts). Can anyone explain how this works? I can't find any clues in the specs. [edit: ...as I obviously didn't read them very carefully.]

Lavish

"san-serif" is treated a string, whereas sans-serif is going to get to the dash and freak out. – Heliostat

In quotes it stands for a specific font whereas the unquoted sans-serif stands for the generic-family (other examples would serif, cursive... – Ancilla

Answer 1

From the same specs:

If a sequence of identifiers is given as a font family name, the computed value is the name converted to a string by joining all the identifiers in the sequence by single spaces.

To avoid mistakes in escaping, it is recommended to quote font family names that contain white space, digits, or punctuation characters other than hyphens:

So when you are writing "san-serif" then it is a specific font and is considered as a string whereas the latter is considered as generic.

Craftsman

Thank you! I should add that I found the "sans-serif"-declaration in a number of emails that all seem to be sent from Microsoft Outlook. – Lavish

The most relevant part of the spec is really the sentence “Generic font family names are keywords and must NOT be quoted.” – Kermis

@JukkaK.Korpela:- Yes I agree and I think OP must have read that by now carefully +1 ;) – Craftsman

In practice, declaring font-family: "sans-serif" has no effect, since there is no font with that name. The font used depends thus on other CSS rules or ultimately browser settings and browser defaults. – Kermis