font

all

caption Uses the font that are used by captioned controls (like buttons, drop-downs, etc.) icon Uses the font that are used by icon labels

menu Uses the fonts that are used by dropdown menus

message-box Uses the fonts that are used by dialog boxes

small-caption A smaller version of the caption font

status-bar Uses the fonts that are used by the status bar

Example


p.ex1 {
     font: 15px arial, sans-serif;
 }

p.ex2 {
     font: italic bold 12px/30px Georgia, serif;
 }

The font shorthand property sets all the font properties in one declaration. The properties that can be set, are (in order): "font-style font-variant font-weight font-size/line-height font-family"

If a font name contains white-space, it must be quoted. Single quotes must be used when using the "style" attribute in HTML.

font family

face

Example


p {
     font-family: "Times New Roman", Georgia, Serif;
 }

There are two types of font family names:

family-name - The name of a font-family, like "times", "courier", "arial", etc.

generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace", "system-ui", "ui-serif", "ui-sans-serif", "ui-monospace", "ui-rounded", "emoji", "math", "fangsong" . attribute in HTML.

font size

size

smaller Sets the font-size to a smaller size than the parent element

larger Sets the font-size to a larger size than the parent element

length Sets the font-size to a fixed size in px, cm, etc.

% Sets the font-size to a percent of the parent element's font size

Example:

h1 {
    font-size:48px;
}

h2 {
    font-size:larger;
}

p {
    font-size:150%;
}

font style

style

This property has three values:

normal - The text is shown normally

italic - The text is shown in italics

oblique - The text is "leaning"

Example:

p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

font-variant

variant

font-variant: normal|small-caps|initial|inherit;

In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.

font-weight

weight

Example

p.normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}

p.thicker {
    font-weight: 900;
}

Open Sans 100 Weight

Open Sans 200 Weight

Open Sans 300 Weight

Open Sans 400 Weight

Open Sans 500 Weight

Open Sans 600 Weight