Scanner class Methods in Java

on
0

CSS font family Property

on

CSS font-family Property

Font is integral part of documentation. Font specifies the degree of importance of  document.It lets the document be well organized and understandable. Every organization has standard fonts.The font-family property specifies the font for an element.

There are two types of font family names:-

font family: a specific font family(like Times New Roman or Arial)
generic family: a group of font families with a similar look(like serif or Monospace)

Here is example of different font styles:

Generic family
Font family
serif
Times New Roman
Georgia
Sans - serf
Arial
Verdana
Monospace
Courier New
Lucida Console

Example Code in HTML:

<html>
<head>
    <title>Font-Family</title>
         <link rel="stylesheet" href="fontfamily.css">
</head>
<body>
    <p class="serif">
        This is a paragraph shown in serif font.
        </p>
   <p class="sansserif">
        This is a paragraph shown in sansserif font.
        </p>
    <p class="monospace">
        This is a paragraph shown in monospace font.
        </p>
    <p class="cursive">
        This is a paragraph shown in cursive font.
       <p
    <p class="fantasy">
        This is a paragraph shown in fantasy font.
        </p>
    
</body>
</html>

Example code in CSS:

p.serif{
font-family: "Times New Roman",Times,serif;
}
p.sansserif{
font-family: Helvetica,Arial,sans-serif;
}
p.monospace{
font-family:"Courier New",Courier,monospace;
}
p.cursive{
font-family: Florence,cursive;
}
p.fantasy{
font-family: Blippo,fantasy;
}

Result :
Image Not Found

Note : Separate each value with a comma to indicate that they are alternatives. If the name of the font family is more than one word, it must be in quotation marks:"Times New Roman".

 The font family property should hold several font names as a "fallback" system. When specifying a web font in a CSS style,add more then one font name, in order to avoid  unexpected behaviors. If the client computer for some reason does not have the one you choose, it will try the next one.
It is good practice to specify a generic font family, to let browser pick a similar font in the generic family, if no other fonts are available.

body{
font-family: "Times New Roman",Times,serif,Helvetica,Arial,sans-serif;
}

if the browser does not support Arial , it tries the next font( "Times New Roman" then Helvetica)
and if browser does not have any of them it will try other generic: serif,sans-serif.
Happy Coding!

Comments

Post a Comment

If you have any doubt, ask here