Scribd Logo
Carica

Benvenuto in Scribd!

  • Font Propertiess

    Caricato da

    Rahul Upamanyu
    6 visualizzazioni6 pagine
    css font

    Copyright

    © © All Rights Reserved

    Formati disponibili

    DOCX, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    css font

    Copyright:

    © All Rights Reserved
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    6 visualizzazioni6 pagine

    Font Propertiess

    Caricato da

    Rahul Upamanyu
    css font

    Copyright:

    © All Rights Reserved
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 6

    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}

    -->

    </style>
    </head>

    <body>
    <h1>Times New Roman Font Family</h1>

    <h2>Lucida Sans Unicode Font Family</h2>


    <h3>Trebuchet MS Font Family</h3>

    </body>
    </html>
    </pre>

    <h3>Output :</h3>

    <h2>Font-Style</h2>
    <hr>
    The <b>Font-Style</b> 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. <b>For Example:</b>
    <p style="background-color:#ccff99;">
    p{FONT-STYLE : "italic;"}
    </p>
    When applied will make the default font to italic.
    <h2>Font-Size</h2>
    <hr>

    The <b>Font-Size</b> 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.
    <table border="2" cellpadding="10%" align="center">
    <tbody>
    <tr>
    <th>Value Type</th>
    <th>Possible Values</th>
    </tr>
    <tr>
    <td>Absolute Size</td>
    <td>xx-small, x-small, small, medium (default), large, x-large, xx-large</td>
    </tr>
    <tr>
    <td>Relative Size</td>
    <td>smaller, larger</td>
    </tr>
    <tr>
    <td>Length</td>
    <td>in(inches), mm(millimeters), cm(centimeters), pt(points), pc(picas), px(pixels),
    em, ex</td>
    </tr>
    <tr>
    <td>Percentage</td>
    <td>%</td>
    </tr>
    </tbody>
    </table>

    <b>For Example:</b>
    <p style="background-color:#ccff99;">
    p { font-size : 16pt ; }
    h1 { font-size : x-small ; }
    body { font-size : larger ;}
    h2 { font-style : italic ; font-size : 150% ; }
    </p>

    <h2>Font-Weight</h2>
    <hr>
    The <b>Font-Weight property </b> allows you to specify the weight of the font i.e.
    how bold the font is. The possible values are normal (default), <b>bold, bolder,
    lighter, 100, 200, 300, 400, 500, 600, 700, 800 and 900</b>.
    <b>For Example :</b>
    <p style="background-color: #ccff99;"><b>p { Font-Weight :200 ; }
    p { Font-Size : 16pt ; Font-Weight : 400 ; }</b></p>

    <h2>Font-Variant</h2>
    <hr>
    The <b>Font-Variant property</b> enables you to display a font in normal or smallcaps. A small-caps font is a smaller version of uppercase font.
    <b>For Example :</b>
    <p style="background-color: #ccff99;"><b>p { Font-Variant : small-caps ; }
    </b></p>

    <h2>Font</h2>

    <hr>
    The <b>Font property</b> 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 <b>Font-Style, Font-Variant, Font-Weight, Font-Size and FontFamily </b>.
    <b>For Example:</b>
    <pre lang=HTML>
    <html>
    <head>
    <title>Font Properties</title>
    <style type="text/css">
    <!-p{font:italic bold 16pt arial;}
    h1{font-family:monospace;}
    -->
    </style>
    </head>
    <body>
    <h1>Font Properties</h1>
    <hr>
    <p>There are many font properties available<br> that help
    to change the look of the text. <br>
    These generally include:</p>
    <ol>
    <li>Font-Style</li>
    <li>Font-Variant</li>
    <li>Font-Weight</li>
    <li>Font-Size</li>
    </ol>
    </body>
    </html>

    </pre>

    Potrebbero piacerti anche