font propertiess

7
Font Properties <p>The <b>font properties are used to control the appearance of the font that you apply to the text in a webpage. With these properties you can specify the size, weight, style etc. of the font.</b> <h2>Font-Family :</h2> <hr> <p>The <b>Font-Family</b> property allows you to specify the font that you want to apply to the text in a webpage. The values that you can specify to this property can be a generic family (family of fonts) and/or specific font from a family. If there are multiple values, then each value must be separated by comma.</p> <b>Example:</b> <pre lang=”HTML”> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Font Family</title> <style type="text/css"> </-- h1{font-family:"Times New Roman", Times, serif} h2{font-family:"Lucida Sans Unicode", "Lucida Grande", sans- serif} h3{font-family:"Trebuchet MS", Arial, Helvetica, sans-serif} -->

Upload: rahul-upamanyu

Post on 10-Nov-2015

213 views

Category:

Documents


1 download

DESCRIPTION

css font

TRANSCRIPT

Font PropertiesThe font properties are used to control the appearance of the font that you apply to the text in a webpage. With these properties you can specify the size, weight, style etc. of the font.Font-Family :

The Font-Family property allows you to specify the font that you want to apply to the text in a webpage. The values that you can specify to this property can be a generic family (family of fonts) and/or specific font from a family. If there are multiple values, then each value must be separated by comma.Example:

Font Family

Times New Roman Font FamilyLucida Sans Unicode Font FamilyTrebuchet MS Font Family

Output :

Font-Style

The Font-Style property allows you to specify the font style of the text in your webpage. The possible values that can be assigned to it are normal (default), italic and oblique. For Example: p{FONT-STYLE : "italic;"} When applied will make the default font to italic.Font-Size

The Font-Size property is used to specify the size of the font. The values that can be assigned to font-size property may be specified in terms of their absolute size, relative size, length and percentage.

Value TypePossible Values

Absolute Sizexx-small, x-small, small, medium (default), large, x-large, xx-large

Relative Sizesmaller, larger

Lengthin(inches), mm(millimeters), cm(centimeters), pt(points), pc(picas), px(pixels), em, ex

Percentage%

For Example:

p { font-size : 16pt ; }h1 { font-size : x-small ; }body { font-size : larger ;}h2 { font-style : italic ; font-size : 150% ; }

Font-Weight

The Font-Weight property allows you to specify the weight of the font i.e. how bold the font is. The possible values are normal (default), bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 and 900.For Example :p { Font-Weight :200 ; }p { Font-Size : 16pt ; Font-Weight : 400 ; }

Font-Variant

The Font-Variant property enables you to display a font in normal or small-caps. A small-caps font is a smaller version of uppercase font. For Example :p { Font-Variant : small-caps ; }

Font

The Font property is a shorthand property in which multiple properties of the font category can be written at the same place. The order of values specified in font properties are Font-Style, Font-Variant, Font-Weight, Font-Size and Font-Family .For Example:

Font Properties

Font Properties

There are many font properties available
that help to change the look of the text.
These generally include:

  1. Font-Style
  2. Font-Variant
  3. Font-Weight
  4. Font-Size