logo标签列表

使用CSS创建窄字符

cssfontswidth
32

如何使用CSS减少类似Arial字体的字符宽度？

我认为在CSS 3中是可能的，但在CSS 2中不行。 - Virat Kadaru
7个回答
30

你无法减小字符宽度，但可以减小字母间距。

span {
 letter-spacing: 0px;
}
2
还可以使用小数（例如0.2px）和负数（例如-1px，-0.2px），因此您可以获得非常精细的控制。 - Val
2
哦，而且有不同的单位，因此它可以独立于大小：-1％，-0.01em - 如果所讨论的文本大小不同时很方便。 - Val
3
@Val，我不知道你使用的/曾经使用的是什么浏览器，但在三年后的Chrome 21中似乎无法显示小数。 - JohnK
1
@JohnK，看起来你是对的——我想当时我使用的是FireFox；它支持十进制分数，现在仍然支持。但是Chrome和其他WebKit浏览器不支持。很好的发现，我应该更加具体明确。 - Val
2
我认为答案应该是：letter-spacing: -1px;，因为使用0px时我们不会得到任何字母间距的减小。字体保持不变。是的，截至目前（Chrome 26），Chrome仍然不支持小数。 - trejder
1
@trejder 时至今日（数年后），似乎Chrome现在已经... - anon
29

在你的字体族声明中使用窄字体，这些字体非常普遍。

font-family: "Helvetica Narrow","Arial Narrow",Tahoma,Arial,Helvetica,sans-serif;

17
1
但不支持Webkit浏览器（Google Chrome，Apple Safari，...） - Primoz Rome
22
这就是为什么我使用了将来时态。 - Gumbo
2
关于font-stretch的注释：Firefox和IE支持font-stretch，但它不会扩展或缩小任意字体。它只是在给定字体中选择最合适的字形。无论如何，它都不能神奇地解决原始问题。请参见CSS Fonts 3中有关font-stretch实际工作原理的说明。链接 - teoli
4
自答案发布以来已经过去了6年，仍然没有支持。无论如何，感谢您的回答。 :) - Yevgeniy Afanasyev
4
不完全正确：我能使用CSS font-stretch - Gumbo
没错，在Google Chrome版本43.0.2357.132中对我不起作用，但在Firefox 38.0中可以正常工作。https://jsfiddle.net/gsqLcder/ 谢谢。 - Yevgeniy Afanasyev
15

您可以调整文本的比例。例如：

.narrow {
    transform: scaleX(0.5);
}

但要注意 transform-origin 可能会使您的文本移动到其他地方（例如，如果您将其缩放并以其中心为原点）。

我在 FireFox 54 中使用了 transform 来处理 SELECT 元素中的文本。它可以正确地缩放 SELECT 元素内的文本并正确绘制 SELECT 元素，但未能调整对象之间的间距。即使水平尺寸明显较小，SELECT 元素仍占用相同的空间。 - JBH
1
这是一个古老的问题，但我想为那些可能会发现它有用的人添加另一个提示：在缩放发生之前将应用换行，这可能导致不必要的多余空格。为了补偿，也要在元素上应用 width: 200%（或者更具体地说，是缩放因子的倒数）。 - nicholas
1
你可以在CSS代码中使用font-weight:来实现这个效果。
0

CSS3：只需简单地使用transform和transform-origin组合：

transform: scaleX(0.85);
transform-origin: 0 100%;

scaleX的值是您所寻求的水平拉伸率（<1表示压缩，>1表示扩展）。

跨浏览器兼容性：FF16、C36、S9、O23 »»

for example: 

document.getElementById('button').onclick = function() {
  document.getElementById('condensed').style.transform = 'scalex(0.85)';
  document.getElementById('condensed').style.transformOrigin = '0 100%';
};
#condensed {
  font-family: Arial,'Helvetica Neue',Helvetica,'Liberation Sans',sans-serif;
  font-size: 2em;
}
<div><div id="condensed">don't shout it — do something about it!</div></div>
<button id="button">condense me!</button>

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接