gTiancai gTiancai - 1 month ago 5
CSS Question

Difference between space and comma -- CSS property values(not in selector)

What's the difference of space and comma in CSS property value(not for selector)?

font:bold 60px helvetical, arial, sans-serif;


I just had a test, it has different effect when change comma to space or vice versa in above style, so I want to know when to use space/comma?

Answer

Space:

Each value make different function. For example:

font: bold 60px helvetica, arial, sans-serif; 

bold = font-weight: bold;

60px = font-size: 60px;

bold do the weight and 60px do the size, these two are different from each other.

Comma:

helvetica, arial, sans-serif = font-family: helvetica, arial, sans-serif;

Values in comma do the same function. They all change font-family. In this case:

If helvetica it's not supported then loads arial, if arial it's not supported then loads sans-serif.

Using fonts with two words:

If you use fonts that contains two words and have spaces like Roboto Slab.

For these fonts you have to put them on double quotes "roboto slab".

Example: font: bold 60px "roboto slab", arial, sans-serif;