Which Property Is Used To Change The Font Of An Element?

CSS - Fonts

This chapter teaches you lot how to set fonts of a content, bachelor in an HTML element. You tin can set following font backdrop of an element −

The font-family property is used to change the face of a font.
The font-mode holding is used to make a font italic or oblique.
The font-variant property is used to create a small-caps upshot.
The font-weight property is used to increase or decrease how bold or light a font appears.
The font-size property is used to increment or subtract the size of a font.
The font holding is used as autograph to specify a number of other font properties.

Prepare 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 proper name.

<html>    <head>    </head>     <torso>       <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 organization.       </p>    </body> </html>

This will produce post-obit result −

Set the Font Style

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

<html>    <head>    </head>     <body>       <p          manner = "font-style:italic;">          This text will be rendered in italic style       </p>    </torso> </html>

This will produce following result −

Prepare the Font Variant

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

<html>    <head>    </head>     <body>       <p          way = "font-variant:pocket-sized-caps;">          This text will be rendered as small caps       </p>    </body> </html>

This will produce following result −

Ready the Font Weight

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

<html>    <head>    </head>     <body>       <p          fashion = "font-weight:assuming;">          This font is bold.       </p>              <p          style = "font-weight:bolder;">          This font is bolder.       </p>              <p          fashion = "font-weight:500;">          This font is 500 weight.       </p>    </body> </html>

This volition produce following result −

Set the Font Size

The following instance demonstrates how to set the font size of an element. The font-size belongings is used to command the size of fonts. Possible values could exist xx-small, x-minor, small, medium, big, 10-large, xx-large, smaller, larger, size in pixels or in %.

<html>    <caput>    </caput>     <body>       <p          manner = "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:big;">          This font size is large       </p>    </torso> </html>

This volition produce following result −

Fix the Font Size Conform

The following case demonstrates how to set the font size adjust of an chemical element. This holding enables you to suit the x-pinnacle to make fonts more legible. Possible value could be whatsoever number.

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

This will produce following result −

Gear up the Font Stretch

The following example 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.

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

This volition produce following outcome −

Shorthand Property

You can utilise the font property to fix all the font properties at in one case. For example −

<html>    <head>    </head>     <trunk>       <p          style = "font:italic small-scale-caps bold 15px georgia;">          Applying all the properties on the text at in one case.       </p>    </body> </html>

This volition produce following result −