我正在寻找一种方法来压缩页面上相对较小的文本区域，以模仿使用非标准字体完成的图形按钮。理想情况下，只有字母会被压扁或变薄，单词之间的空间或多或少相同。我知道有一些 CSS 属性可以做这样的事情，但它们更关注字母之间的间距，而不是字母本身的宽度。这些 CSS 方法也不是很友好的跨浏览器。大多数用户群都在使用 IE6，因此对基于 CSS 的方法有很大的限制。
那么，有什么方法可以控制跨浏览器友好的字符宽度/间距？我知道 jQuery 可以很好地跨浏览器工作，那么这可以通过操纵字母的位置以及可能的宽度来使用 jQuery 来完成吗？这些是一小段文字，一次 5 个单词左右，所以速度是可以稍后处理的。
编辑：好的，所以，CSS letter-spacing 属性以及 word-spacing 属性将允许我控制字母/单词之间的间距。然而，这会让事情看起来很糟糕。如果这真的是唯一的选择，那么我将不得不让它发挥作用，但我真正想要的是一种压缩字母本身的方法，使字符更薄。
【问题讨论】：
将近十年后，font-stretch 仍然几乎不受支持。但
transform:scaleX(); 可以。 Here.
【讨论】：
您可以使用WhatTheFont 追踪原始字体
【讨论】：
简短回答：我认为没有一个可以满足您要求的跨浏览器示例。
CSS3 规范包含一个 font-stretch 属性，但遗憾的是，目前几乎（如果有的话）支持 CSS3。
我能想到的模仿这种行为的一些可能方法：
简而言之，对于这个问题没有简单而优雅的解决方案，因为文本和图像操作通常是您在图形编辑器中执行的操作。
【讨论】：
那么，你想在不压扁的情况下压扁它吗？
然后尝试调整字体大小。或者字母间距、字间距和字体大小的某种组合。 （所有这些在 IE6 中都可以正常工作）。
.nav {font-size: 80%;
letter-spacing: -.05em;
word-spacing: .05em; }
【讨论】：
我不得不质疑一开始就尝试这样做是否明智。只需用可读的东西替换该死的图形；或者你可以用你的文本复制的东西。
您要做的是更改文本的字体。我认为您最好的选择是查看为您的用户群预装的一堆不同字体，并尝试获得最佳字体+大小组合。
【讨论】：
您确定正确指定了文档类型吗？也许您的浏览器正在以怪癖模式解释您的 CSS，从而导致不可预知的行为。
如果letter-spacing 不能正常工作，我认为 jQuery 不会对你有太大帮助。你不能改变单个字母的位置，除非每个字母都在它自己的元素中，比如span，这看起来很乱。
编辑：如果您想缩小字符本身的水平宽度，理论上可以使用font-stretch: narrower 来完成，例如。但似乎主要浏览器不正确或根本不支持它。显然它是在 CSS2 中，但后来在 CSS2.1 中下降，现在计划用于 CSS3。
【讨论】：
我认为这类事情可能应该在图形编辑器中完成并输出到轻量级图像（png 或类似图像）。我认为这是将文本的视觉输出控制到这种程度的唯一简单可靠的方法。
确保在 img 标记上重复 alt 属性中的文本以实现可访问性。
这种方法在本地化方面存在问题 - 因为您需要为每个区域设置一个版本 - 但这仍然可行。
如果您想将此文本与其他文本保持一致，也会出现问题 - 例如在一个段落的中间。但如果这就是正在做的事情，听起来“压扁的文本”可能并不是一个好的 UI。
【讨论】：
这听起来像是一场噩梦。
如果是浮动 DIV，您可以通过将每个单词放入浮动 DIV 并调整每个 DIV 的宽度来捏造整个事情。
【讨论】：
【讨论】：