21278 Posts in 5728 Topics by 2599 members
|
Page:
1
|
Go to End | |
| Author | Topic: | 283 Views |
-
PHP/JS solution to needing a custom 'font'
19 October 2011 at 12:46pm
OK not quite sure where to start here -
I'm working on something which has a diy/collage look & feel. The typography is very simple letters as if made from glued strips of paper. So I'd like to be able to enter text in the CMS and have it appear in this 'font'. Just menu items really.
http://www.doubledotdash.org/sss/index.htm
So the question is how!
Create a new font from the images I have and embed it? I wouldn't mind but I can't find any software to help with this.
Is there a javascript/php script out there that will take a string, examine each letter and pick from a source image or images the correct letter and piece it together?
Will I have to write this myself (somehow?!)
Any pointers will be appreciated!
-
Re: PHP/JS solution to needing a custom 'font'
19 October 2011 at 5:34pm Last edited: 19 October 2011 5:51pm
Hey Martin,
There are a number of different ways that you could do this. The simplest way (and probably the least semantic) is to do as you suggested and make a image for each letter and just include them with javascript. The problems with this are the actual kerning of the letters is difficult to control and you would maybe want to think about a none js fallback. To get you started here is some jQuery based javascript that might come in handy:
// The HTML
<ul>
<li id="menuItem1">Contact Us</li>
<ul>// The jQuery
$("#menuItem1").html(
$.map($('#menuItem1').html().split(""), function(char) {
return "<img src='images/crazyFont/"+char+".png' alt='"+char+"' />";
}).join("")
);This will take the contents of the first menuItem and convert it into a series of images which you will need to create in images/crazyFont/a.png etc...
Hope this point you in the right direction. Depending on if this is just for yourself or a client you may want to put some sort of validation on the menu field so that they dont try to include characters that you dont have images for.
P.S. You can see it in action here http://jsfiddle.net/FRmKb/1/ (obviously the images don't actually work)
-
Re: PHP/JS solution to needing a custom 'font'
19 October 2011 at 8:42pm
Howard, that's just perfect! Thank you very much for that - it's going to be very helpful!
-
Re: PHP/JS solution to needing a custom 'font'
19 October 2011 at 10:31pm
To add to the options there is sifr and cufon too. I just searched for a sifr module (I am sure there was one by willr) but only found one by nicolaas that I dont' recall using.
| 283 Views | ||
|
Page:
1
|
Go to Top |
