Css Font

Font attribute is use for giving a size, style, font-family, weight and line-height of a text. We can specific font attributes as a shorthand and individually (longhand) code.

Font family

The Font-family attribute specified with the font family names and/or with generic family names Question is? , What is difference between font-family name and generic-family names? “Arial”, “Open sans” are font-family on the other side generic-family are ‘serf’, ‘sans-serif’, ‘fantasy’, ‘monospace’ and ‘cursive’. Font family attribute values are starting with font you want, and end with generic family. If fonts are available on the system then it works on browser, otherwise browsers pick the generics family.

h1{
    font-family: "Open Sans", Arial, serif;
}

If you specified one or more font family values, then it separate by comma. Quotation mark font name are highest priority and rest of the font name lowest, this is work when browser does not support the highest priority font family.

Font-size

The Font-size property specifies to set the size of text. Text size is important for any web page. Font size attribute will settle for keywords, length units, or percentages as values. Length units are px, em, rem. Negatives values are not allowed in font-size attribute. How we use the em, please go through this blog.

h1{
    font-size:24px;
}

Font-Style

The Font-style property specifies to give the style to text. These style attribute values are normal, italic and oblique. Normal value shows the text in normal form, Italic value show the text in italics and last oblique similar italic.

h1 { font-style: normal;}

h2 {font-style: italic;}

h3{font-style: oblique; }

Line-height

The line-height property specifies to set the spacing between two or more lines. Line height unit are also define in percents and length units. Length units in px, em, rem. Negatives values are not allowed in font-size attribute. Default value of line-height is 1.2.

h1{
    line-height:16px;
}

Font-weight

The Font-weight property specifies the weight or thickness of the font. The font-weight values used informed of either keyword or predefined numeric value.

Keyword value: normal | bold | bolder | lighter

Numeric value: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Numeric value font weight reflects through lighter (300) to bolder (900). We don’t use these values in px, em or other length units.

h1{
    font-weight:300;
}

Leave a Comment.