Text with gradient and custom font
Ok here is my challenge, I have some <h1>
tags that I want to convert into a custom font and apply a gradient from left to right.
Initially I was going for the idea of using cufon as this does both, but it turns out cufon only supports top to bottom gradients.
My only other option as far as I am aware is sIFR which I believe may support this, but its not preferable.
Does anyone have any recommendations? I have looked at typeface js which doesn't do gradients (I think) and CSS3 like moz-linear-gradient 开发者_StackOverflowbut this doesn't support applying it as a color.
Thanks!
Can't you just manually hack the cufón code to change gradient direction for now?
I haven't tried or tested this myself, but I suspect the lines you'd want to change would be something like:
@973, for VML implementation
... fill.angle = 270;
@1364, for canvas implementation
... fill = g.createLinearGradient(viewBox.minX, 0, viewBox.maxX, 0);
See this: Javascript example: text color to gradient. Might help you out.
I've developed a function that replace texts with canvas and it allow you to add gradient colors via CSS color property. Take a look at it and let me know if you like it.
https://github.com/msnazi/Gradient-for-text
精彩评论