Styling Font

In this world there are a variety of languages and fonts. Not a few people in this world has its own language. Call it Japanese, Arabic, English, and Indonesia. Japanese and Arabic language very clearly has its own style. Meanwhile, Britain and Indonesia, respectively have the same fonts but different language. Given this background, the font is very important to put in the CSS.

Font Family

Unlike other CSS, the value of the font family can be written more than one, separated by commas, which shows as an alternative.

<html>
<head>
<style type="text/css">
p.serif{font-family:"Georgia",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
</head>

<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Georgia font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>

</body>
</html>

There are two types of font names famiy, the first is a family-name, and the second is a generic-family. There are five types of generic-family: serif, san-serif, cursive, fantasy, monospace. But on the computer, san-serif is easier than serif rendered. Many of the designers of websites recommend to put the generic-family as a last alternative. If the value of font-family there are more than one, then the font-family must be quoted.

Font Style

There are four types of font style used on the normal, italic, oblique, and inherit (Takes the same value as the specified property for the element's parent).

<html>
<head>
<style type="text/css">
p#no{ font-style: normal; }
p#ita{ font-style: italic; }
p#obl{ font-style: oblique; }
</style>
</head>

<body>
<p id="no">This is a paragraph(normal)</p>
<p id="ita">This is a paragraph(italic)</p>
<p id="obl">This is a paragraph(oblique)</p>
</body>
</html>

There are many ways to determine the size of the font. For example, by pixel units, em units, units of percent, combination units percent and em. As is the one em is equal to 16 pixels. We give you suggestion that to use em units as your size units. Because Internet Explorer can not give best performance if using pixel units. Nevertheless there is absolute-size which is one of the properties of the font size. That is xx-small, x-small, small, medium, large, x-large, xx-large.

<html>
<head>
<style type="text/css">
p#xxs{ font-size: xx-small; }
p#xs{ font-size: x-small; }
p#s{ font-size: small; }
p#m{ font-size: medium; }
p#l{ font-size: large; }
p#xl{ font-size: x-large; }
p#xxl{ font-size: xx-large; }
</style>
</head>

<body>
  <p id="xxs">This is a paragraph(xx-small)</p>
  <p id="xs">This is a paragraph(x-small)</p>
  <p id="s">This is a paragraph(small)</p>
  <p id="m">This is a paragraph(medium)</p>
  <p id="l">This is a paragraph(large)</p>
  <p id="xl">This is a paragraph(x-large)</p>
  <p id="xxl">This is a paragraph(xx-large)</p>
</body>
</html>

Font Variant

One more way we can in the css font is small-caps. In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters Appears in a Smaller font size than the original uppercase letters in the text. Through a font variant, the small-caps can be done. There are three values that apply to a font variant. That is normal, small-caps, and inherit.

<html>
<head>
<style type="text/css">
p#no{ font-variant: normal; }
p#sm{ font-variant: small-caps; }
</style>
</head>

<body>
  <p id="no">This is a paragraph(normal)</p>
  <p id="sm">This is a paragraph(small-caps)</p>
</body>
</html>

Font Weight

We can provide a bold, only with the involvement of font weight. The font-weight property sets how thick or thin characters in a text Should not be displayed.

<html>
<head>
<style type="text/css">
p#no{ font-weight: normal; }
p#b{ font-weight: bold; }
</style>
</head>

<body>
  <p id="no">This is a paragraph(normal)</p>
  <p id="b">This is a paragraph(bold)</p>
</body>
</html>

Fonts

Font is a quick way we write all the font properties that have been mentioned above. With statement fonts then it can be written in a shorter form.

<html>
<head>
<style type="text/css">
 h1{
   font: bold 1.2em Helvetica, Arial, sans-serif;
 }
 p{
   font: italic 30px Times, Garamond;
 }
</style>
</head>

<body>
  <h1>font property example</h1>
  <p>This is a paragraph.</p>
</body>
</html>

Please always to contact w3.org as reference when you making a site. For more information about css font. Please to read article for css font from w3c.

Get Latest Update Basic Setting Bootstrap on Blogger

Contributors

Threelas

Styling Font

Font Family

Font Style

Font Size

Font Variant

Font Weight

Fonts

Sponsor

All Comments

Labels

Join Us On Facebook

Blog Archive