Comments (12)
Seeing as font-stretch is unimplemented by many browsers (such as Firefox) this could turn out to be a bit troublesome.
http://www.w3.org/TR/css3-fonts/#font-width-the-font-stretch-property
https://developer.mozilla.org/En/CSS/Font-stretch
"font-stretch was defined in CSS 2, but dropped in CSS 2.1 due lack of implementation experience. It's newly drafted in CSS 3."
What are you trying to accomplish with font-stretch? Do you have many variants of the same font and you'd like to be able to select a narrower/wider variant with font-stretch, or do you only have one font and you'd like to "stretch" it? Perhaps it's easier to explain it like this:
Do you want:
font-stretch: condensed;
Or do you want:
font-stretch: 80%; /* note: this goes against the specs */
from cufon.
Ok, reporter wanted both. There's no CSS equivalent for case 2 though.
I'm not really sure what to do.. stretching a font is very likely to make it look funny.
from cufon.
I thought it was vector based, and thus wouldn't matter. Is it not?
from cufon.
For reference, typeface.js uses font-stretch (but lacks so many of Cufon's cool features). You might be interested in taking a look for some 'inspiration' on how it is implemented: http://typeface.neocracy.org/examples.html
from cufon.
It's not that it would be difficult, I'm just wondering whether it has any real use cases (like I said, most fonts are probably going to end up looking funny).. it might not even suit your purposes.
I'm just worried that it'd end up being one of those "nice to have" features that no one uses.
from cufon.
I truly think designers and font aficionados alike (read Cufon users) would love to have this level of precision over their fonts and would put it to good use if available. Look how many obsess over such minute details as kerning, letter-spacing, and word-spacing =)
I'm not sure how it would look funny; I think it looks great on the example page I linked.
Ultimately, I think it's a must-have feature!
from cufon.
Implemented fake font-stretch in commit ebed1c7. Server's been updated as well.
Unfortunately you can't define font-stretch in CSS because no browser seems to honor it. So, it works like this:
Cufon.replace('h1', {
fontStretch: 'ultra-condensed'
});
See the API wiki page for more details.
Do you think there's need for the "real" font-stretch? You can already do it by using:
Cufon.replace('h1', {
fontFamily: 'MyFont-Condensed'
});
Where MyFont-Condensed is the name the generator usually spits out for condensed fonts. Personally I think it isn't needed.
from cufon.
Is there an easy way to convert a regular font into a stretched/condensed one? If so, you may be right. I know of none, though.
from cufon.
It works wonderfully, thank you so much!!
from cufon.
Say you have two fonts:
MyFont Condensed
MyFont Regular
In this case they share the same family name:
MyFont
- Condensed
- Regular
Currently there's no way to tell Cufón which variant to use. The selection process is only based on font-weight and font-style. With "real" font-stretch it would work like this:
Cufon.replace('h1', {
fontFamily: 'MyFont',
fontStretch: 'condensed'
});
Or like this when browsers start to support it some day (currently no browser supports it):
<h1 style="font-stretch: condensed">Lorem ipsum</h1>
..
Cufon.replace('h1', {
fontFamily: 'MyFont'
});
Compared to how it is now:
Cufon.replace('h1', {
fontFamily: 'MyFont-Condensed'
});
Which assumes that the font has been generated with a distinct name for each variant. I think it's enough, "real" as in by-the-specs font-stretch would have relatively little use compared to the pain of implementing it.
from cufon.
Ah, I see what you mean.
Agreed, I think it would be not worth it. The way you've done it is perfect. It's far easier to use =)
from cufon.
Ok, we'll leave by-the-specs font-stretch unimplemented for now. Issue closed.
from cufon.
Related Issues (20)
- Does cufon supports Devnagari script? HOT 3
- Margin / Padding / Line-height problems in IE8
- Capital "A" isn't rendering HOT 5
- Problem loading font on iOS devices where CSS media = print included
- Hover { hover: 'true' } doesn't work within HTML5 <nav> element
- Blurry text windows 8 mobile
- Animate Colour of Cufon Text
- Object required line 7 character 1638 @version 1.09i
- Cufon font SwitzerlandCondensed: bold is shifted up compared to normal
- Cufon for retina display
- Vertical text support
- Cufon vanishes my header after rendering on Safari
- Cufon make my website disappear in firefox
- Cufon google translate problem
- Cufon Not Working? HOT 5
- Cufon different line-hight IOS vs PC
- If descent is zero, cufon returns empty string instead of zero for descent. HOT 1
- FontForge version on Cufon website HOT 4
- Please bring back development HOT 1
- Cufon not working properly in latest Google Chrome HOT 13
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cufon.