CSS fonts
CSS Fonts
This chapter teaches you how to set the font of the content in the HTML element. You can set the following font properties for an element:
-
The
- font-family property changes the appearance of a font.
-
The
font-style property makes a font italic or tilted.
-
font-variant The
font-weight property is used to increase or decrease the weight of a font.
-
The
font-size property is used to increase or decrease the size of a font.
-
The
font property is used as a shorthand for specifying multiple other font properties.
Setting the Font Family
The following example shows how to set the font family of an element. Possible values can be any font family name.
<html>
<head>
</head>
<body>
<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>
</body>
</html>
This will produce the following result−
Setting the font style
The following is an example showing how to set the font style of an element. Possible values are normal, italic, and oblique.
<html>
<head>
</head>
<body>
<p style = "font-style:italic;">
This text will be rendered in italic style
</p>
</body>
</html>
This will produce the following result −
Setting Font Variants
The following example demonstrates how to set font variants for an element. Available values are normal and small-caps.
<html>
<head>
</head>
<body>
<p style = "font-variant:small-caps;">
This text will be rendered as small caps
</p>
</body>
</html>
This will produce the following result−
Setting Font Weight
The following example shows how to set the font weight of an element. The font-weight property provides the ability to specify the degree of font boldness. Possible values are normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
<html>
<head>
</head>
<body>
<p style = "font-weight:bold;">
This font is bold.
</p>
<p style = "font-weight:bolder;">
This font is bolder.
</p>
<p style = "font-weight:500;">
This font is 500 weight.
</p>
</body>
</html>
This will produce the following results−
Setting Font Size
The following example demonstrates how to set the font size of an element. The font-size property is used to control the size of the font. Possible values include xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, and the size is in pixels or %.
<html>
<head>
</head>
<body>
<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>
</body>
</html>
This will produce the following results−
Setting Font Sizing
The following example demonstrates how to set the font sizing of an element. This property allows you to adjust the x-height to make the font more readable. Possible values can be any number.
<html>
<head>
</head>
<body>
<p **style = "font-size-adjust:0.61;"** >
This text is using a font-size-adjust value.
</p>
</body>
</html>
This will produce the following result −
Setting Font Scale
The following example shows how to set the font scale of an element. This property depends on whether the user’s computer has an expanded or compressed version of the font being used.
Possible values are normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, and ultra-expanded.
<html>
<head>
</head>
<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>
</body>
</html>
This will produce the following result –
Shorthand Properties
You can use font properties to set all font properties at once. For example –
<html>
<head>
</head>
<body>
<p **style = "font:italic small-caps bold 15px georgia;"** >
Applying all the properties on the text at once.
</p>
</body>
</html>
This will produce the following results-
