使用 CSS 制作窄字符答案

【问题标题】：Make narrow characters with CSS使用 CSS 制作窄字符
【发布时间】：2010-11-12 18:32:22
【问题描述】：

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

【问题讨论】：

我认为在 CSS 3 中是可能的，但在 CSS 2 中是不可能的

【解决方案1】：

您不能减小字符宽度，但可以减小字母间距。

span {
 letter-spacing: 0px;
}

【讨论】：

还接受小数部分（例如 0.2px）和负数（例如 -1px、-0.2px），因此您可以获得一些非常细粒度的控制。
哦，还有不同的单位，因此它可以与大小无关：-1%、-0.01em -- 如果相关文本的大小不同，则很方便。
@Val，我不知道您正在/正在使用什么浏览器，但三年后的 Chrome 21 中似乎无法使用小数。
@JohnK，看起来你是对的——我想我当时正在使用 FireFox；它确实并且仍然支持小数部分。但不是 Chrome，我假设其他 WebKit 浏览器。很好，我应该更具体。
我相信，答案应该是：letter-spacing: -1px;，与0px 一样，我们没有减少任何字母间距。字体保持不变。是的，到目前为止（Chrome 26）Chrome 仍然不支持分数。

【解决方案2】：

在您的字体系列声明中使用窄字体。这些很常见。

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

【讨论】：

【解决方案3】：

font-stretch property of CSS 3 可以拉伸字体。

【讨论】：

但不支持 Webkit 浏览器（Google Chrome、Apple Safari 等）
@PrimozRome 这就是我使用将来时的原因。
只是对font-stretch 的评论：font-stretch 支持Firefox 和IE，不会扩展或收缩任意字体。它只是在给定字体中选择最合适的面。无论如何，它都不会神奇地解决原来的问题。见Explanation about how font-stretch really work in CSS Fonts 3。
它仍然不受支持，距离答案已经过去了 6 年。无论如何，谢谢你的回答。 :)
@YevgeniyAfanasyev 不完全是：Can I use … CSS font-stretch

【解决方案4】：

您可以缩放文本。例如：

.my-text {
    transform: scaleX(0.5);
}

但请注意transform-origin，它会使您的文本移动到其他位置（例如，如果您以原点为中心进行缩放）。

【讨论】：

我在 FireFox 54 中使用 transform 来表示 SELECT 元素中的文本。它正确缩放了我的SELECT 元素内的文本并正确绘制了SELECT 元素，但它未能调整对象之间的间距。 SELECT 元素占用相同的空间，尽管它在水平方向上要小得多。

【解决方案5】：

你可以在你的css代码中使用font-weight:

【讨论】：

【解决方案6】：

您可以尝试使用font-stretch CSS property:

font-stretch: condensed;

浏览器支持似乎有限 - 参见例如cmets 到 this other answer - 但它在 Firefox 61 中对我有用。

【讨论】：

【解决方案7】：

CSS3：只需结合使用transform 和transform-origin：

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

scaleX 的值是您寻求的水平拉伸率（ 1 表示展开）。

跨浏览器：FF16、C36、S9、O23»»

例如：

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>

【讨论】：