font-stretch - HTML CSS CSS Property

HTML CSS examples for CSS Property:font-stretch

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. font-stretch

Description

The font-stretch CSS property selects a normal, condensed, or expanded face from a font.

The following table summarizes the font-stretch Property.

Item Value
Default value: normal
Applies to:All elements. It also applies to ::first-letter and ::first-line
Inherited: Yes
Animatable: Yes.

Syntax

The syntax of the property is as follows: 


font-stretch:     normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
normal a normal font face. This is default value.
ultra-condensed the most condensed font face.
extra-condensed the second most condensed font face.
condensed a condensed font face
semi-condensed a slightly condensed font face.
semi-expanded a slightly expanded font face.
expandedan expanded font face.
extra-expanded the second most expanded font face.
ultra-expanded the most expanded font face.
initial Sets this property to its default value.
inherit take the value of its parent element font-stretch property.

The example below shows the font-stretch property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 font-stretch Property</title>
  <style type="text/css">
  p {<!--   w  w w . j  a  v a 2s.c o  m-->
        font-family: Arial, Helvetica, sans-serif;
        font-stretch: condensed;
    }
</style>
 </head>
 <body>
  <p>This is a paragraph.</p>
 </body>
</html>

Related Tutorials