Question

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

那么，有没有办法控制跨浏览器友好的字符宽度/间距？我知道jQuery可以在浏览器中很好地工作，所以这可能是通过操纵字母的位置和可能的宽度来完成的吗？这些是一小段文字，一次5个单词，所以速度是可以稍后处理的。

编辑：好的，所以，CSS字母间距属性以及字间距属性将允许我控制字母/单词之间的空格。然而，这使事情看起来很紧张。如果这真的是唯一的选择，那么我必须让它发挥作用，但我真正想要的是一种方法来压缩字母本身，使字符更薄。

Answer 1

也许

letter-spacing:-1px

will help

Answer 2

简答：我认为没有符合您要求的跨浏览器示例。

CSS3规范包含font-stretch属性，但遗憾的是，CSS3目前几乎不支持（如果有的话）。

可以模仿这种行为的一些可行方法，我能想到：

使用基于Flash的方法，例如sIFR
使用基于javascript / canvas的方法，例如Typeface.js。 the example page
使用压缩字体（icky-approach，因为这意味着您依赖于客户端可用的字体），如Arial Narrow。
使用从文本参数生成图像的服务器端脚本

简而言之，这个问题有没有简单而优雅的解决方案，因为文本和图像处理通常是您在图形编辑器中所做的事情。

如果无法做到这一点，我肯定会建议您查看Typeface和sIFR。

Answer 3

我认为这种事情应该在图形编辑器中完成并输出到轻量级图像（png或类似的）。我认为这是控制文本视觉输出的唯一简单可靠的方法。

请确保重复 img 标记的 alt 属性中的文字以获取辅助功能。

这种方法存在本地化问题 - 因为您需要为每个语言环境提供一个版本 - 但这仍然是可行的。

如果您希望将此文字与其他文字保持一致，也会出现问题 - 例如在段落的中间。但如果这就是正在做的事情，听起来像“压扁文本”可能并不是一个好的用户界面。

Answer 4

所以，你想要在没有压扁它的情况下压扁它吗？

然后尝试调整字体大小。或者字母间距，字间距和字体大小的某种组合。（所有这些在IE6中都可以正常工作）。

.nav {font-size: 80%;
letter-spacing: -.05em;
word-spacing: .05em; }

Answer 5

您确定要正确指定您的文档类型吗？也许你的浏览器在怪异模式下解释你的CSS，导致不可预测的行为。

如果letter-spacing无法正常工作，我认为jQuery对您没有多大帮助。你不能改变单个字母的位置，除非每个字母都在它自己的元素中，例如span，这看起来很麻烦。

编辑：如果您想缩小字符本身的水平宽度，理论上可以使用font-stretch: narrower来完成。但似乎主浏览器不能正确支持它或根本不支持它。显然它是在CSS2中，但随后在CSS2.1中被删除，现在计划用于CSS3。

Answer 6

这听起来像是一场噩梦。

你可以通过将每个单词放入浮动的DIV并摆弄每个DIV的宽度来捏造整个事物。

Answer 7

首先，我必须质疑甚至试图做到这一点的智慧。只需用可读的东西替换darn图形;或者你可以用你的文字复制的东西。

您要做的是更改文字的字体。我认为你最好的选择是查看为用户群预装的一系列不同的字体，并尝试使用最好的字体+大小组合。

Answer 8

您可以使用WhatTheFont

追踪原始字体

Answer 9

十年后，font-stretch几乎不受支持。但 transform:scaleX();会这样做。 Here

是否有跨浏览器方式来压缩页面上的文本？

9 个答案: