Alessandro Melandri

WebSphere Commerce Specialist, project manager, wannabe photographer

Compact Font Styles

This is a simple tip that can help you reduce your style sheet size. Take a look at this CSS portion:

1
2
3
4
5
6
7
8

.myClass{
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 1.1em;
  font-weight: bold;
  font-style: italic;
  line-height: 1.5em;
  font-variant: uppercase;
}

All these properties can be condensed into a one row expression using this syntax:

1

font: fontSize/lineHeight weight style variant family;

See the example below:

1
2
3

.myClass{
  font: 1.1em/1.5em bold italic uppercase Arial,Verdana,Helvetica,sans-serif;
}

Just remember that this syntax will only function if you specify both font-size and font-family.