是否有跨浏览器的方式来压缩页面上的文本？ [英] Is there a cross-browser way to condense text on a page?

问题描述

我正在寻找一种方法来压缩页面上相对较小的文本区域，以尝试模仿使用非标准字体完成的图形按钮。理想情况下，只是字母会被压扁或变薄，留下字之间的空间或多或少相同。我知道有一些CSS属性做这样的事情，但他们更侧重于字母之间的间距，而不是这么多的字母本身的宽度。这些CSS方法也不是非常跨浏览器友好。大多数用户群都使用IE6，因此对基于CSS的方法的限制很大。

I am looking for a way to condense relatively small areas of text on a page in an effort to mimic a graphic button that was done with a non-standard font. Ideally, just the letters would get squished or made thinner, leaving the space between words more or less the same. I know there are some CSS attributes that do things like this, but they are more focused on spacing between the letters and not so much on the widths of the letters themselves. These CSS methods are also not very cross-browser friendly. The majority of the user base is using IE6, so that puts a large restriction on CSS-based methods out of the blocks.

所以，有没有办法控制字符宽度/间距是跨浏览器友好？我知道jQuery工作在不同的浏览器，所以也许可以通过操作字母的位置和可能的宽度来完成jQuery？这些是小文本，每次5个字，等等，所以速度是可以处理的东西，稍后可以处理。

So, is there any way to control the character width/spacing that is cross-browser friendly? I know jQuery works across browsers quite well, so could this perhaps be done with jQuery by manipulating the location of the letters and possibly their widths? These are small bits of text, 5 words at a time, or so, so speed is something that can be dealt with later.

编辑：好的，所以，CSS字符间距属性，以及字间距属性将允许我控制字母/字之间的空间。然而，这使事情看起来压扁。如果这真的是唯一的选择，那么我必须让它工作，但我真正寻找的是一种挤压字母自己，以使字符更薄。

Ok, so, the CSS letter-spacing property, as well as the word-spacing property will allow me to control the space between letters/words. However, this makes things look squished. If this truly is the only option, then I'll have to make it work, but what I am really looking for is a way to squish the letters themselves, to make the characters thinner.

推荐答案

简短答案：我不认为有一个可以满足您需求的跨浏览器示例。

Short answer: I don't think there is a working cross-browser example that meets your requirements.

CSS3规范包括 font-stretch 属性，但是很遗憾，CSS3目前只支持这个功能。

The CSS3 specification includes a font-stretch property, but sadly enough, CSS3 is barely (if at all) supported at this time.

• 使用基于闪存的方法，例如 sIFR


• 使用基于javascript / canvas的方法例如 Typeface.js 。 示例页中包含一个font-stretch示例


• 使用缩略字体（icky-approach，因为这意味着您依赖于客户端可用的字体），例如Arial Narrow。


• 使用服务器端脚本生成来自文本参数的图片

• Use a flash-based approach like sIFR
• Use a javascript / canvas based approach like Typeface.js. There's a font-stretch example included on the example page
• Use condensed fonts (icky-approach, since this means you are relying on the font being available for the client), like Arial Narrow.
• Use a server-side script that generates an image from text parameters

总之，这个问题有没有简单而优雅的解决方案

如果这是不可能的话，我一定会建议您查看 a href =http://typeface.neocracy.org/ =nofollow noreferrer>字体和 sIFR 。

If this is not possible, I'd definately recommend looking into Typeface and sIFR.

这篇关于是否有跨浏览器的方式来压缩页面上的文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！