The font-stretch property in CSS is used to set the text wider or narrower. This property is not working any font. Its only work when font family has a width-variant face.
Syntax:
font-stretch: normal|ultra-condensed|extra-condensed|condensed| semi-condensed|semi-expanded|expanded|extra-expanded|ultra-expanded;
Default Value: normal
Property Values:
- normal: It is the default font face. It does not stretch the font.
- ultra-condensed: It is used to specify the font face as more condensed than normal.
- extra-condensed: It is used to set text narrower than normal and not narrower than ultra-condensed.
- condensed: It is used to set text narrower than semi-condensed and not narrower than extra-condensed.
- semi-condensed: It is used to set text narrower than normal and not narrower than semi-condensed.
- semi-expanded: It is used to set text wider than normal, but not wider than expanded.
- expanded: It is used to set text wider than semi-expanded, but not wider than extra-expanded.
- extra-expanded: It is used to set text wider than expanded, but not wider than ultra-expanded.
- ultra-expanded: It is used to set text wider than ultra-expanded.
Example:
html
<!--HTML code to illustrate font-stretch Property --> <!DOCTYPE html> < html >
< head >
< title >
CSS font-stretch Property
</ title >
< style >
.normal {
font-stretch: normal;
}
.ultra_condensed {
font-stretch: ultra-condensed;
}
.extra_condensed {
font-stretch: extra-condensed;
}
.condensed {
font-stretch: condensed;
}
.extra_condensed {
font-stretch: extra-condensed;
}
.semi_expanded {
font-stretch: semi-expanded;
}
.expanded {
font-stretch: expanded;
}
.extra_expanded {
font-stretch: extra-expanded;
}
.ultra_expanded {
font-stretch: ultra-expanded;
}
</ style >
</ head >
< body >
< div class = "normal" >
GeeksforGeeks: A computer science portal
</ div >
< div class = "ultra_condensed" >
GeeksforGeeks: A computer science portal
</ div >
< div class = "extra_condensed" >
GeeksforGeeks: A computer science portal
</ div >
< div class = "condensed" >
GeeksforGeeks: A computer science portal
</ div >
< div class = "extra_condensed" >
GeeksforGeeks: A computer science portal
</ div >
< div class = "semi_expanded" >
GeeksforGeeks: A computer science portal
</ div >
< div class = "expanded" >
GeeksforGeeks: A computer science portal
</ div >
< div class = "extra_expanded" >
GeeksforGeeks: A computer science portal
</ div >
< div class = "ultra_expanded" >
GeeksforGeeks: A computer science portal
</ div >
</ body >
</ html >
|
Output:
Note: This property will not work on any font.
Supported Browsers: The browser supported by font-stretch property are listed below:
- Google Chrome 60.0 and above
- Edge 12.0 and above
- Internet Explorer 9.0 and above
- Firefox 9.0 and above
- Opera 47.0 and above
- Safari 11.0 and above
Article Tags :
Recommended Articles