使用CSS生成窄字符

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

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

span {
 letter-spacing: 0px;
}

---

可以使用扩展字体。

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

---

字体系列：“Helvetica窄字体”、“Arial窄字体”、Tahoma、Arial、Helvetica、无衬线字体

您可以在css代码中使用

字体权重：

来实现此功能

您只需缩放文本即可。例如：

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

但是要小心变换原点，这会使文本移动到其他位置（例如，如果您以原点为中心缩放文本）。

您可以尝试使用：

---

浏览器支持似乎是有限的——例如，请参阅对的评论——但它在Firefox 61中对我有效。

我认为在CSS 3中是可能的，但在CSS 2a中不是这样的，它还可以使用小数点（例如0.2px）和负数（例如，-1px，-0.2px），因此您可以获得一些非常细粒度的控件。哦，还有不同的单位，因此它可以独立于大小：-1%，-0.01em——如果所讨论的文本大小不同，那么它就很方便了。@Val，我不知道你正在/正在使用什么浏览器，但三年后，小数在Chrome 21中似乎不起作用。@JohnK，看起来你是对的——我想当时我在使用FireFox；它过去和现在都支持小数。但不是Chrome，我假设还有其他WebKit浏览器。好的，我应该更具体一些。我相信，答案应该是：

字母间距：-1px

，与

0px

一样，我们没有得到任何字母间距的减少。字体保持不变。是的，到目前为止（Chrome 26）Chrome仍然不支持分数。但是Webkit浏览器（Google Chrome，Apple Safari，…）@primozorome不支持分数。这就是为什么我使用将来时态的原因。只是对字体拉伸的一点评论：Firefox和IE支持的字体拉伸，不会扩展或收缩任意字体。它只是在给定字体中选择最合适的字体。无论如何，它都无法神奇地解决原来的问题。看到了吗？答案出来已经6年了，它仍然不被支持。无论如何，谢谢你的回答。：）@YevgeniyAfanasyev不完全正确：我在Firefox54中使用

转换
作为
选择
元素中的文本。它正确地缩放了我的
SELECT
元素中的文本，并正确地绘制了
SELECT
元素，但它无法调整对象之间的间距。
SELECT
元素占用相同的空间，尽管它在水平方向上要小得多。
font-stretch: condensed;