Tutorials Point


  CSS Beginners
  CSS Advanced
  CSS References
  CSS Resources
  Selected Reading

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

Setting Fonts using CSS


previous next AddThis Social Bookmark Button


Advertisements

This tutorial will teach you how to set fonts of a content available in an HTML element. You can set following font properties of an element:

  • The font-family property is used to change the face of a font.

  • The font-style property is used to make a font italic or oblique.

  • The font-variant property is used to create a small-caps effect.

  • The font-weight property is used to increase or decrease how bold or light a font appears.

  • The font-size property is used to increase or decrease the size of a font.

  • The font property is used as shorthand to specify a number of other font properties.

Set the font family:

Following is the example which demonstrates how to set the font family of an element. Possible value could be any font family name.

<p style="font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the default
serif font depending on which font  you have at your system.
</p>

This will produce following result:

This text is rendered in either georgia, garamond, or the default
serif font depending on which font you have at your system.

To Become more comfortable - Do Online Practice

Set the font style:

Following is the example which demonstrates how to set the font style of an element. Possible values are normal, italic and oblique.

<p style="font-style:italic;">
This text will be rendered in italic style
</p>

This will produce following result:

This text will be rendered in italic style

To Become more comfortable - Do Online Practice

Set the font variant:

Following is the example which demonstrates how to set the font variant of an element. Possible values are normal and small-caps.

<p style="font-variant:small-caps;">
This text will be rendered as small caps
</p>

This will produce following result:

This text will be renedered as small caps

To Become more comfortable - Do Online Practice

Set the font weight:

Following is the example which demonstrates how to set the font weight of an element. The font-weight property provides the functionality to specify how bold a font is. Possible values could be normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.

<p style="font-weight:bold;">
This font is bold.
</p>
<p style="font-weight:bolder;">
This font is bolder.
</p>
<p style="font-weight:900;">
This font is 900 weight.
</p>

This will produce following result:

This font is bold.

This font is bolder.

This font is 900 weight.

To Become more comfortable - Do Online Practice

Set the font size:

Following is the example which demonstrates how to set the font size of an element. The font-size property is used to control the size of fonts. Possible values could be xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels or in %

<p style="font-size:20px;">
This font size is 20 pixels
</p>
<p style="font-size:small;">
This font size is small
</p>
<p style="font-size:large;">
This font size is large
</p>

This will produce following result:

This font size is 20 pixels

This font size is small

This font size is large

To Become more comfortable - Do Online Practice

Set the font size adjust:

Following is the example which demonstrates how to set the font size adjust of an element. This property enables you to adjust the x-height to make fonts more legible. Possible value could be any number.

<p style="font-size-adjust:0.61;">
This text is using a font-size-adjust value.
</p>

This will produce following result:

This text is using a font-size-adjust value.

To Become more comfortable - Do Online Practice

Set the font stretch:

Following is the example which demonstrates how to set the font stretch of an element. This property relies on the user's computer to have an expanded or condensed version of the font being used.

Possible values could be normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded.

<p style="font-stretch:ultra-expanded;">
If this doesn't appear to work, it is likely that 
your computer doesn't have a condensed or expanded 
version of the font being used.
</p>

This will produce following result:

If this doesn't appear to work, it is likely that your computer doesn't have a condensed or expanded version of the font being used.

To Become more comfortable - Do Online Practice

Shorthand property :

You can use the font property to set all the font properties at once. For example:

<p style="font:italic small-caps bold 15px georgia;">
Applying all the properties on the text at once.
</p>

This will produce following result:

Applying all the properties on the text at once.

To Become more comfortable - Do Online Practice



previous next Printer Friendly

Advertisements


  

Advertisements