rs79.vrx.palo-alto.ca.us
font
font family
font size
font style
font-variant
font-weight
metrics
Fonts
Google Fonts callout:

  • <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed|Radley:400,400italic' rel='stylesheet' type='text/css'>

    Font Properties
    The properties that can be set, are (in order): "font-style font-variant font-weight font-size/line-height font-family"

    • font
    font

    all

    warning

    font: font-style font-variant font-weight font-size/line-height|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;

    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
    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
    font size

    size

    font-size: medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;

    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
    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
    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
    font-weight

    weight

    font-weight: normal|bold|bolder|lighter|number|initial|inherit; number is one of: 100 200 300 400 500 600 700 800 900 where 400 is normal and 700 is bold.

    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
    Open Sans 700 Weight Open Sans 800 Weight Open Sans 900 Weight