This chapter acquaints you with how to work with fonts. CSS enables you to change the way your text is displayed. This is made possible by  the several options CSS gives you for defining the styles of text. You can change the font-family, boldness, size, and also the style of the text.

The several options for defining the styles of text are given below:

Font-Family

• Visitors can view only the fonts which are already installed in their computer, so if the font you are using is not supported by the visitor's browser, it will cause weird effects. Hence, the solution is to use standard fonts or the generic font names.
• The font-family property is a prioritized list of font family names and/or generic family names for an element.
• While using font family property, more than one font in your family-font tag is to be used.
• It can have the values:
  Font name- It displays the exact name of the font to be used. 
  Family name- It displays different names of the font-family; like "times", "courier", "arial", etc.
  Generic name- It displays names of a generic family like "serif", "sans-serif", "cursive", "fantasy", "monospace", etc.
• Multiple choices of  fonts are separated by commas.
• Any font name containing white space must be quoted with either single or double quotes.
• A generic family name should always be offered as the last alternative.

Font-Size

• With this property, the size of the text appearing on a web page can be manipulated. How large or small the text should appear, can be specified.
• It can have two values: Absolute and Relative.
• Absolute keywords can be:  xx-small, x-small, small, medium, large, x-large, xx-large.
  These set the size of the font to different sizes, from xx-small to xx- large.
• Relative keywords can be:                                                                                                                                   
    smaller- This sets the font to a smaller size than the parent element.
    larger- This sets the font size to a larger size than the parent element.
    length- This sets the font size to a fixed size.
    % - This sets the font size to a percentage of the parent element.
• By default, text appears with a font size of medium.

Font-Size-Adjust

• CSS allows a list of fonts in order of preference, similarly as in the font family property. The generic font names are chosen if the exact font name and font families are not available. However when font substitution occurs; font-size, line-height, and font-weight do not adjust to preserve legibility of the first choice. The unadjusted results of font-substitution are often unacceptable. To solve this problem, CSS proposed a new property called font-size-adjust.

• Font-adjust property applies simple algorithmic transformation of the originally specified font-size, line-height, and font-weight to the substituted font to help preserve the font's appearance.

• The font-size-adjust property specifies an aspect-value for an element that will preserve the ex-height of the first choice font in substituted fonts.

• The ratio between the height of the font's lowercase letter "x" and the height of the "font-size" is called a font's aspect value.

• It can have the values: none or number.
    none- This does not preserve the font's previous height if the font is unavailable.
    number- This defines the aspect value ratio for the font.

The formula used is:

Font size applied to available font= font-size of first choice font * font-size (font-size-adjust/aspect value of available font)

Font-Style

• The CSS font-style property defines the style of the font, i.e. whether the font displayed will be italic or not.
• It can have the values- normal, italic or oblique.
    normal - The browser displays a normal font.
    italic - The browser displays an italic (also known as cursive) font.
    oblique - The browser displays an oblique font (also known as slanted or inclined font). It is similar to an italic font.
• By default, normal font is applied.

ExpertRating CSS Certification - Get Certified Now!!