CSS FONT-STRETCH
The font-stretch property is used to expand or contract (condense) the horizontal width of the font. The change is relative to the normal width of the font as displayed by the browser.
narrower
The narrower value contracts the font to the next smaller width.
wider
The wider value expands the font to the next larger width. The order descends from narrowest to widest in value. The normal value is the normal width of the font as displayed by the browser.
Example
| h2 {font-stretch: ultra-condensed} |
Possible Values
| Value | Description |
|---|---|
| normal | Sets the scale of condensation or expansion to normal |
| wider | Sets the scale of expansion to the next expanded value |
| narrower | Sets the scale of condensation to the next condensed value |
| ultra-condensed
extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded |
Sets the scale of condensation or expansion of the font-family. “ultra-condensed” is the most condensed (narrowest) value, and “ultra-expanded” is the most expanded (widest) value |
13 Responses
I have tried the font-stretch CSS and it doesnt seem to work in most browsers, especially on MAC
I’d love to use this … but how widely, and bullet-proof is it implemented?
I’ve been trying to do this as well. The feature is built in CSS3 but still seems to not be implemented in mac browsers from what i can see. Does anyone know of any alternatives other than images….?
Didn’t work for me either. PC. I used live view in CS4, and it didn’t work.
no go in firefox surprisingly either.
(version 3.0.10)
font-stretch:ultra-condensed
No EFFECT with Internet Explorer 8 v8.0.6001.18702
It is my understanding that this only calls for a condensed version of the font, the same as calling font-style: arial narrow; so the user needs the font installed for it to work.
Yes, it depends on the the fonts installed. Testing on Windows XP/Firefox 3 and strech does not have any effect on Arial.
I could use font-family:”Arial Narrow”… it can be useful to someone!
pls. some example to how to works and effect on text ….
Boa merda…
Currently none of the major browsers support this.
It should use a narrower/wider font (-> a character with a normal size of 10wx10h becomes one of 8wx10h for example)
Currently I use the ‘letter-spacing’ property for adjusting text width. Keeps the size of the characters, but lessens/widens the space between them.
This property would be nice when implemented!
Not working for me either.
Im using Dreamweaver CS3 (really old). Yet this “font-stretch” appears on the code-hinting drop down… how can this property be there when its not working (I need enlightenment T_T).
You can use CSS transforms to achieve the effect with any font.