我正在寻找一种方法来压缩页面上相对较小的文本区域,以模仿使用非标准字体完成的图形按钮.理想情况下,只是字母会被压扁或变得更薄,使字之间的空间大致相同.我知道有一些CSS属性可以做这样的事情,但是它们更侧重于字母之间的间距而不是字母宽度本身.这些CSS方法也不是非常跨浏览器友好.大多数用户群都在使用IE6,因此对基于CSS的方法提出了很大的限制.
那么,有没有办法控制跨浏览器友好的字符宽度/间距？我知道jQuery可以在浏览器中很好地工作,所以这可能是通过操纵字母的位置和可能的宽度来完成的吗？这些是一小段文本,一次5个单词,所以速度是可以在以后处理的东西.
编辑：好的,所以,CSS字母间距属性,以及字间距属性将允许我控制字母/单词之间的空格.然而,这使事情看起来很紧张.如果这真的是唯一的选择,那么我必须让它工作,但我真正想要的是一种方法来压缩字母本身,使字符更薄.
解决方法
简短回答：我认为没有符合您要求的跨浏览器示例.
CSS3规范包含一个font-stretch属性,但遗憾的是,CSS3目前几乎不支持(如果有的话).
一些可以模仿我可以想到的行为的方法：
>使用像sIFR这样的基于闪存的方法
>使用基于javascript / canvas的方法,如Typeface.js. the example page中包含字体拉伸示例
>使用压缩字体(icky-approach,因为这意味着您依赖于客户端可用的字体),如Arial Narrow.
>使用从文本参数生成图像的服务器端脚本
简而言之,这个问题没有简单而优雅的解决方案,因为文本和图像处理通常是您在图形编辑器中执行的操作.
