CSS Fonts

          There are several kinds of fonts used by professional website to enrich their layout. You can also used them by putting in Edit HTML section of post and also in your gadget section. Now I am going to share kinds of fonts and their attribution. There are several fonts that are attractive and recognize by all popular web browsers.

          CSS Fonts are better than simple HTML fonts. CSS Fonts are widely used because of they have more freedom of customization. 

          Take a look how the fonts are used in HTML. For example I want to write in Cursive Font, so I write it in as

<font face="cursive">Cursive </font>

and it results as

        Cursive

1. Font Face : Font Face means type of font. The entire list of commonly used fonts are given below. Some Example show the how different kinds of fonts are used.

<font face="monospace">Monospace</font>

     Monospace

<font face="fantasy">fantasy </font>

           fantasy

<font face="sans-serif">sans-serif </font>

          sans-serif

<font face="serif">serif </font>

          serif


Here is complete list of widely used fonts. The exact name should put in the value of "font face"

academy engraved let
algerian
amaze
arial
arial black
balthazar
bankgothic lt bt
bart
bimini
comic sans ms
book antiqua
bookman old style
braggadocio
britannic bold
brush script mt
century gothic
century schoolbook
chasm
chicago
colonna mt
comic sans ms
commercialscript bt
coolsville
courier
courier new
cursive
dayton
desdemona
fantasy
flat brush
footlight mt light
futurablack bt
futuralight bt
garamond
gaze
geneva
georgia
geotype tt
(*above: Geotype TT)
helterskelter
helvetica
herman
highlight let
impact
jester
joan
john handy let
jokerman let
kelt
kids
kino mt
la bamba let
lithograph
lucida console
map symbols
marlett
matteroffact
matisse itc
matura mt script capitals
mekanik let
monaco
monospace
monotype sorts
ms linedraw
new york
olddreadfulno7 bt
orange let
palatino
playbill
pump demi bold let
puppylike
roland
sans-serif
scripts
scruff let
serif
short hand
signs normal
simplex
simpson
stylus bt
superfrench
surfer
swis721 bt
swis721 blkoul bt
symap
symbol
tahoma
technic
tempus sans itc
terk
times
times new roman
trebuchet ms
trendy
txt
verdana
victorian let
vineta bt
vivian
webdings
wingdings
western
westminster
westwood let
wide latin
zapfellipt bt

2. Font Color: Fonts can be used with color value, it can be the name of color or the HEX Color value. For Example  color="blue". Look how can put it in font coding.

<font color="blue">Blue color </font>

       Blue color

<font color="green">Green color </font>

        Green color

<font color="#FFFF00">Yellow color </font>

      Yellow color

<font color="#FF0000"> Red color</font>

          Red color


3. Font Size:- Font Size responsible for the size of fonts that are used in font face and it has numerical value 1-0.

<font size="1"> Font size 1 </font>

           Font size 1

<font size="2"> Font size 2 </font>

          Font size 2

<font size="6"> Font size 6</font>

       
        Font size 6
   

<font size="10"> Font size 10</font>

          Font size 10


CSS Fonts: font weight -Bold

Font Weight is responsible for font's Boldness. 

<p style="font-weight:bold;">CSS BOLD</p>

     
        CSS BOLD

To make certain word or lines bold use <span>......(write here to make bold>......</span> tag.

<p>You can make Bold<span style="font-weight:bold">Me</span>by Span Tag.</p>

You can make Bold Me by Span Tag.


Consider that in above lines "You can make Bold IT by Span Tag.", only the word "Me" is Bold and used under Span Tag.

CSS Fonts: font weight -Italic

Text can show italic by using the 'font-style' property: 

<p style="font-style:italic;">CSS Italic</p>

CSS Italic

For making only some word italic use <span> tag. as used in bold certain words. for example

<p>Make<span style="font-style:italic">Me</span> Italic Only</p>

Make Me Italic Only


CSS text-indent: It is used for Text indent in numerical values(%)

<style type="text/css">
p { text-indent: 10% }
</style>
<p>If your browser recognises the CSS text-indent property, you will notice that the first line of this text has been indented. The rest of the text is rendered without the indent.</p>
<p>Then, when the next paragraph comes along, the first line is indented again!</p>

            If your browser recognizes the CSS text-indent property, you will notice that the first line of this text has been indented. The rest of the text is rendered without the indent


          Then, when the next paragraph comes along, the first line is indented again!



letter spacing : To fix the space between letters use this code

<style type="text/css">
  p.wide-tracking { letter-spacing: 0.5em }
</style>
<p class="wide-tracking">CSS letter-spacing is similar to tracking in desktop publishing - it determines the space in between letters.</p>

it results as

CSS letter-spacing is similar to tracking in desktop publishing - it determines the space in between letters.

line height: To fix the height between lines

<style type="text/css">
  p { line-height: 180%; }
</style>
<p>CSS line-height is similar to leading in desktop publishing - it determines the "line height" (suprised?). This gives the impression of lines of text being closer together or further apart. Changing the line height in conjunction with using the letter-spacing, word-spacing, float properties can produce some nice looking layouts.</p>

it results

CSS line-height is similar to leading in desktop publishing - it determines the "line height" (suprised?). This gives the impression of lines of text being closer together or further apart. Changing the line height in conjunction with using the letter-spacing, word-spacing, float properties can produce some nice looking layouts.

background color: To change the background color of Text

<style type="text/css">
.colorBox {
font: bold large cursive;
border:1px solid #000000;
background-color:#ff2550;
}
</style>
<div class="colorBox">
<p>This div element has a background-color of #ff9900</p>
</div>

This div element has a background-color of #ff2550

text alignment

<style type="text/css">
div {
 text-align: right;
}
</style>
<div>This div has been aligned using the css text-align property. Try changing the values to see the effect it has on the alignment of the cell. Also, do not let the css "text align" name fool you. You can align any element - not just text.</div>

It results

This div has been aligned using the css text-align property. Try changing the values to see the effect it has on the alignment of the cell. Also, do not let the css "text align" name fool you. You can align any element - not just text.

For Center alignment use "center"

<style type="text/css">

div {

 text-align: center;

}

</style>

<div>This div has been aligned using the css text-align property. Try changing the values to see the effect it has on the alignment of the cell. Also, do not let the css "text align" name fool you. You can align any element - not just text.</div>

It results

This div has been aligned using the css text-align property. Try changing the values to see the effect it has on the alignment of the cell. Also, do not let the css "text align" name fool you. You can align any element - not just text.

text decoration

<style type="text/css">
a:hover { text-decoration:none }
</style>
<div><a href="http://mastblogtips.blogspot.com/" target="blank">Mast Blog Tips</a></div>
<p>The above hyperlink has been decorated using the css text-decoration property. Note that removing underlines from hyperlinks can cause usability issues so try to use it cautiously .</p>

It results

Mast Blog Tips
The above hyperlink has been decorated using the css text-decoration property. Note that removing underlines from hyperlinks can cause usability issues so try to use it cautiously

CSS text-shadow

<style type="text/css">
h1.drop-shadow { text-shadow: 3px 4px 9px blue }
</style>
<h1 class="drop-shadow">Mast Blog Tips</h1>
<p>If your browser recognises the CSS text-shadow property, the above heading should have a shadow effect of background color</p>

It results:

Mast Blog Tips

If your browser recognises the CSS text-shadow property, the above heading should have a shadow effect of background color

<style type="text/css">
h1.uppercase { text-transform: uppercase }
</style>
<h1 class="uppercase">"Uppercase or lowercase"</h1>

It results

"UPPERCASE OR LOWERCASE"

I hope that this formation is useful for your blog destining. Please Visit my Hindi Blog also.....!

अरविन्द जांगिड

कहानी घर

Baca juga