Scribd Logo
Upload

Welcome to Scribd!

  • Learn CSS Font Styles with Examples

    Uploaded by

    pratik
    14 views8 pages
    The document discusses CSS font properties including font family, style, size, weight, and variant. It defines serif and sans-serif fonts and explains how to set font properties using generic families, specific font families, pixels, and ems. The font properties allow controlling the typeface, boldness, size, and style of text.

    Original Description:

    css

    Original Title

    CSS Fonts

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses CSS font properties including font family, style, size, weight, and variant. It defines serif and sans-serif fonts and explains how to set font properties using generic families, specific font families, pixels, and ems. The font properties allow controlling the typeface, boldness, size, and style of text.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    14 views8 pages

    Learn CSS Font Styles with Examples

    Uploaded by

    pratik
    The document discusses CSS font properties including font family, style, size, weight, and variant. It defines serif and sans-serif fonts and explains how to set font properties using generic families, specific font families, pixels, and ems. The font properties allow controlling the typeface, boldness, size, and style of text.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 8

    5/24/2016

    CSSFonts

    CSS Fonts
    Previous

    NextChapter

    TheCSSfontpropertiesdefinethefontfamily,boldness,size,andthestyleofa
    text.

    Difference Between Serif and Sansserif Fonts

    CSS Font Families


    InCSS,therearetwotypesoffontfamilynames:
    genericfamilyagroupoffontfamilieswithasimilarlook(like"Serif"or
    "Monospace")
    fontfamilyaspecificfontfamily(like"TimesNewRoman"or"Arial")

    Generic
    family

    Fontfamily

    Description

    Serif

    TimesNew
    Roman
    Georgia

    Seriffontshavesmalllinesattheends
    onsomecharacters

    Sansserif

    Arial

    "Sans"meanswithoutthesefontsdo
    nothavethelinesattheendsof
    1/8

    5/24/2016

    CSSFonts

    Monospace

    Verdana

    characters

    CourierNew
    Lucida
    Console

    Allmonospacecharactershavethe
    samewidth

    Note:Oncomputerscreens,sansseriffontsareconsideredeasiertoread
    thanseriffonts.

    Font Family
    Thefontfamilyofatextissetwiththe fontfamily property.
    The fontfamily propertyshouldholdseveralfontnamesasa"fallback"system.Ifthe
    browserdoesnotsupportthefirstfont,ittriesthenextfont,andsoon.
    Startwiththefontyouwant,andendwithagenericfamily,toletthebrowserpicka
    similarfontinthegenericfamily,ifnootherfontsareavailable.
    Note:Ifthenameofafontfamilyismorethanoneword,itmustbeinquotation
    marks,like:"TimesNewRoman".
    Morethanonefontfamilyisspecifiedinacommaseparatedlist:

    Example
    p{
    fontfamily:"TimesNewRoman",Times,serif;
    }
    TryitYourself

    Forcommonlyusedfontcombinations,lookatourWebSafeFontCombinations.

    Font Style
    2/8

    5/24/2016

    CSSFonts

    The fontstyle propertyismostlyusedtospecifyitalictext.


    Thispropertyhasthreevalues:
    normalThetextisshownnormally
    italicThetextisshowninitalics
    obliqueThetextis"leaning"(obliqueisverysimilartoitalic,butlesssupported)

    Example
    p.normal{
    fontstyle:normal;
    }
    p.italic{
    fontstyle:italic;
    }
    p.oblique{
    fontstyle:oblique;
    }
    TryitYourself

    Font Size
    The fontsize propertysetsthesizeofthetext.
    Beingabletomanagethetextsizeisimportantinwebdesign.However,youshouldnot
    usefontsizeadjustmentstomakeparagraphslooklikeheadings,orheadingslooklike
    paragraphs.
    AlwaysusetheproperHTMLtags,like<h1><h6>forheadingsand<p>for
    paragraphs.
    Thefontsizevaluecanbeanabsolute,orrelativesize.
    Absolutesize:
    3/8

    5/24/2016

    CSSFonts

    Setsthetexttoaspecifiedsize
    Doesnotallowausertochangethetextsizeinallbrowsers(badforaccessibility
    reasons)
    Absolutesizeisusefulwhenthephysicalsizeoftheoutputisknown
    Relativesize:
    Setsthesizerelativetosurroundingelements
    Allowsausertochangethetextsizeinbrowsers

    Note:Ifyoudonotspecifyafontsize,thedefaultsizefornormaltext,
    likeparagraphs,is16px(16px=1em).

    Set Font Size With Pixels


    Settingthetextsizewithpixelsgivesyoufullcontroloverthetextsize:

    Example
    h1{
    fontsize:40px;
    }
    h2{
    fontsize:30px;
    }
    p{
    fontsize:14px;
    }
    TryitYourself

    Tip:Ifyouusepixels,youcanstillusethezoomtooltoresizetheentirepage.

    Set Font Size With Em


    4/8

    5/24/2016

    CSSFonts

    Toallowuserstoresizethetext(inthebrowsermenu),manydevelopersuseem
    insteadofpixels.
    TheemsizeunitisrecommendedbytheW3C.
    1emisequaltothecurrentfontsize.Thedefaulttextsizeinbrowsersis16px.So,the
    defaultsizeof1emis16px.
    Thesizecanbecalculatedfrompixelstoemusingthisformula:pixels/16=em

    Example
    h1{
    fontsize:2.5em;/*40px/16=2.5em*/
    }
    h2{
    fontsize:1.875em;/*30px/16=1.875em*/
    }
    p{
    fontsize:0.875em;/*14px/16=0.875em*/
    }
    TryitYourself

    Intheexampleabove,thetextsizeinemisthesameasthepreviousexamplein
    pixels.However,withtheemsize,itispossibletoadjustthetextsizeinallbrowsers.
    Unfortunately,thereisstillaproblemwitholderversionsofIE.Thetextbecomeslarger
    thanitshouldwhenmadelarger,andsmallerthanitshouldwhenmadesmaller.

    Use a Combination of Percent and Em


    Thesolutionthatworksinallbrowsers,istosetadefaultfontsizeinpercentforthe
    <body>element:

    5/8

    5/24/2016

    CSSFonts

    Example
    body{
    fontsize:100%;
    }
    h1{
    fontsize:2.5em;
    }
    h2{
    fontsize:1.875em;
    }
    p{
    fontsize:0.875em;
    }
    TryitYourself

    Ourcodenowworksgreat!Itshowsthesametextsizeinallbrowsers,andallowsall
    browserstozoomorresizethetext!

    Font Weight
    The fontweight propertyspecifiestheweightofafont:

    Example
    p.normal{
    fontweight:normal;
    }
    p.thick{
    fontweight:bold;
    6/8

    5/24/2016

    CSSFonts

    }
    TryitYourself

    Font Variant
    The fontvariant propertyspecifieswhetherornotatextshouldbedisplayedina
    smallcapsfont.
    Inasmallcapsfont,alllowercaselettersareconvertedtouppercaseletters.However,
    theconverteduppercaselettersappearsinasmallerfontsizethantheoriginal
    uppercaselettersinthetext.

    Example
    p.normal{
    fontvariant:normal;
    }
    p.small{
    fontvariant:smallcaps;
    }
    TryitYourself

    More Examples
    Allthefontpropertiesinonedeclaration
    Thisexampledemonstrateshowtousetheshorthandpropertyforsettingallofthefont
    propertiesinonedeclaration.

    7/8

    5/24/2016

    CSSFonts

    Test Yourself with Exercises!


    Exercise1

    Exercise2

    Exercise3

    Exercise4

    Exercise5

    All CSS Font Properties


    Property

    Description

    font

    Setsallthefontpropertiesinonedeclaration

    fontfamily

    Specifiesthefontfamilyfortext

    fontsize

    Specifiesthefontsizeoftext

    fontstyle

    Specifiesthefontstylefortext

    fontvariant

    Specifieswhetherornotatextshouldbedisplayedina
    smallcapsfont

    fontweight

    Specifiestheweightofafont

    Previous

    NextChapter

    Copyright19992015byRefsnesData.AllRightsReserved.

    8/8

    You might also like