Why would font names need quotes?

问题:

As far as I know, one needs to use double or single quotes for fonts if they contain spaces, like:

font-family: "Times New Roman", Times; 
font-family: 'Times New Roman', Times;

But on Google Fonts (http://www.google.com/webfont), I also see

font-family: 'Margarine', cursive;

Some even use it like so:

font-family: 'Margarine', 'Helvetica', arial;

I find this weird, as the following works as well:

font-family: Arial, Helvetica, sans-serif;
font-family: Cambria, serif;

So what is the correct usage of quotes around font names in CSS?

回答1:

You can always put a specific font family name in quotes, double or single, so Arial, "Arial", and 'Arial' are equivalent. Only the CSS-defined generic font family names like sans-serif must be written without quotes.

Contrary to popular belief, a font name consisting of space-separated names such as Times New Roman need not be quoted. However, the spec recommends “to quote font family names that contain white space, digits, or punctuation characters other than hyphens”

回答2:

I've just learned myself that the quotes aren't ever necessary but rather recommended. We all learn something new every day.

The other place you see them is in css properties that require a url

background:url('hithere.jpg');
background:url(hithere.jpg);

Both those statements are going to work exactly the same. Same goes for the fonts, which type of quote you use is irrelevant in this case, just be consistent in how YOU do things and that is all that really matters.

回答3:

For two reasons;

1. When an actual font-family name shares the same name as a generic family name, to avoid confusion with keywords with the same names e.g.

p {font-family: 'Shift', sans-serif;}

2. When there are more than one word in a font-family name e.g.

p {font-family: 'Times New Roman', ..... , a generic family name here ;}

回答4:

You have to use quotes when there is a space in the font name. If there is no space in the font name, it's best practice to leave them off, although it won't hurt anything but your file size to have them still.

Examples:

font-family: "Times New Roman", Times; // ok, and best practice
font-family: Times New Roman, Times; // incorrect, Browser won't be able to find Times New Roman
font-family: "Times New Roman", "Times"; // ok, but has extraneous quotes around Times