|
|||||||||
 |
 |
 |
|||||||
|
|||||||||
 |
 |
CSS Tutorial - Working with Fonts
Font-Weight
- The CSS font-weight property allows you to control the boldness of the font.
- Font-weight property lets you set how thick or thin the characters in the text should be displayed.
- It can have the values- normal, bold, bolder, lighter or you can set it to 100,200,300,400,- - - - - 900.
normal- This defines normal characters.
bold-This defines thick characters.
bolder / lighter- This selects the next higher or lower value that are relative to the weight inherited from the parent.
100 to 900 defines characters from thin to thick .400 is synonymous with 400 and 700 is synonymous with bold.
Example |
|
p { font-weight : 700;} Font-weight is 700 p { font-weight : lighter;} Font-weight is lighter |
|
Font-Variant
- The CSS font-variant property allows you to display text in a small-caps font.
- It implies that all the lowercase letters are converted to uppercase letters but all the letters in the small-caps font have a smaller font-size compared to the rest of the text.
- It can have the values- normal or small-caps.
Normal enables the browser to display a normal font.
Small-caps enables the browser to display a small-caps font. - The default value is normal.
Example |
|
p { font - variant : small-caps;} Incorporating sound and motion into a web page can make them look more life - like. p { font - variant : normal;} Incorporating sound and motion into a web page can make them look more life like. |
|
| Note |
| Every font does not support CSS font-variant property |
Font-Stretch
-
The CSS font-stretch property condenses or expands the current font family.
-
It can have the values- Normal, Absolute or Relative keyword values.
- Normal sets the scale of condensation or expansion to normal.
- Absolute keyword values consist of - wider and narrower.
Wider or narrower values set the scale of expansion to the next expanded value above the inherited value, or condensation to the next condensed value below the inherited value. It does not increase above 'ultra expanded' and does not decrease below 'ultra condensed'. - Relative keyword values consist of- ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, and ultra-expanded.
The relative keyword values indicate a scale of condensation or expansion of the current font-family. -
Ultra-condensed is the narrowest value and ultra-expanded is the widest value.
-
The default value of font-stretch property is normal.
Example |
|
p { font-stretch : ultra-expanded;} T h i s t e x t i s u l t r a - e x p a n d e d. |
|
| Summary | |||||
In this chapter you have learnt:
|
|||||
| Review Questions | |||||
Fill in the Blanks
State whether True or False
|
|||||
| What's Next | |||||
The next chapter will familiarize you with the basic concepts of styling borders. It will further let you know about other styles, colors and widths for borders and also corresponding to different edges. |
|||||
