使用图像作为文本

时间:2012-06-19 13:43:29

标签: php javascript html html5 photoshop

我的老板想要使用Photoshop,绘画或插图画家创建自己的自定义字体。他希望每个字母都是多色或改变颜色,并且可能有阴影,并希望在他的网站上使用它,这样当人们输入文字时,它不是你通常看到的简单的黑白文字。我已经研究并知道您可以使用字体创建器创建自定义字体,但是可以使用代码(java脚本或php)将单个字母/符号图像插入文本框中,或者使用Dreamweaver中的事件处理程序或CSS 。如果是这样,任何人都有可能的示例或您知道的网站。非常感谢所有帮助。

3 个答案:

答案 0 :(得分:3)

您可以使用 @ font-face (http://www.font-face.com/)在网页中嵌入您的自定义字体,然后使用一些javascript(一种颜色算法)每隔一个字母)+ CSS3(自定义颜色),以获得老板正在寻找的预期效果。

出于性能原因,我建议使用@ font-face或google网络字体而不是Cufon。

祝你好运!

答案 1 :(得分:2)

我同意Dale你应该创建一个实际的字体并将其包含在你的CSS中。您应该使用专为字体设计的工具,而不是使用专为照片编辑和常规图形设计设计的Adobe产品,例如FontForge或许多可用的商业应用程序之一。

对于特殊效果,您可以使用jQuery add-ontextgrad或其他wrapSelection"Animation and Effects" plugin来实现您想要的效果。

如果要用图像替换文本,可以使用一些StackOverflow问题来涵盖该主题。查看thisthis

如果您在将这些问题与HTML表单集成时遇到问题,则应该创建一个新的StackOverflow问题,其中包含您尝试的代码(最好以简单的方式复制,以便回答您问题的人可以测试内容)。

答案 2 :(得分:0)

您可以使用@ font-face轻松地将自定义字体添加到网站。注意:您需要将字体转换为几种不同的格式以支持所有主流浏览器。幸运的是,这是一种自动执行此操作的方式:

http://www.fontsquirrel.com/fontface/generator

祝你好运创造一个多色字体! :)