CSS Font Property

There are several font-related properties in CSS3 that allow you to control the appearance of text on a web page. Some of the most commonly used font properties include:

1. font-family: Specifies the typeface of the text. You can specify multiple font families as a fallback in case the first specified font is not available.

2. font-size: Specifies the size of the text in pixels, ems, or other units of measurement.

3. font-style: Specifies whether the text should be displayed in italic or normal style.

4. font-weight: Specifies the boldness of the text.

5. line-height: Specifies the height of a line of text.

6. letter-spacing: Specifies the amount of space between characters in the text.

7. word-spacing: Specifies the amount of space between words in the text.

8. text-align: Specifies the horizontal alignment of the text.

9. text-decoration: Specifies the type of line (underline, overline, line-through) that should appear under the text.

10. text-transform: Specifies how the text should be capitalized.

11. text-shadow: Specifies the shadow effect that should be applied to the text.

These properties can be combined to create a variety of different text styles.

p{
    font-size: 22px;
}
p{
    font-family: 'Courier New', Courier, monospace;
}
p{
    font-style: italic;
    font-style: normal;
    font-style: oblique;
}
p{
    font-weight: 600;
    font-weight: lighter;
    font-weight: bold;
    font-weight: bolder;
    font-weight: normal;
}

Font Shorthand Property

You can apply all font style in one line using font shorthand property.

p {
    font: italic small-caps bold 20px verdana, serif;
  }

Text Related 

Align : Set the alignment of text using text-align property

p{
    text-align: center;
    text-align: left;
    text-align: right;
    text-align: justify;
}

Decorate the text using text-decoration property

p{
    text-decoration: none;
    text-decoration: overline;
    text-decoration: underline;
    text-decoration: wavy;
    text-decoration: line-through;
}

Transform Text Uppercase, Lowercase, Capitalize etc.

p{
    text-transform: capitalize;
    text-transform: uppercase;
    text-transform: lowercase;
    text-transform: none;
}

Text-Shadow

Set the shadow for text.Value will be shadow in x - direction, shadow in y - direction, shadow blur ,shadow spread and shadow color.

p{
    text-shadow: 5px 5px 10px 20px black;
}

Line-Height

set the line height of text.

p{
    line-height: normal;
    line-height: 20px;
}

Letter-Spacing

Set the space between each letter of text or paragraph.

p{
    letter-spacing: normal;
    letter-spacing: 3px;
}

Word-Spacing

Set the space between the words.

p{
    word-wrap: normal;
    word-wrap: break-word;
}

Word-Wrap

Adjust the word if space is not sufficient.

p{
    word-wrap: normal;
    word-wrap: break-word;
}

Overflow

Adjust the element if the space is not sufficient. It will create a scrollbar as you defined Horizontal scroll bar or vertical scroll bar.

p{
    overflow: hidden;
    overflow: scroll;
    overflow-y: scroll;
}

---