30

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

4

7 回答 7

29

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

span {
 letter-spacing: 0px;
}
于 2009-07-21T19:31:43.133 回答
27

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

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

于 2011-02-16T21:22:03.533 回答
17

font-stretch使用CSS 3的属性可以拉伸字体。

于 2009-07-21T19:34:48.963 回答
13

你可以缩放你的文本。例如：

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

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

于 2016-10-19T07:01:03.193 回答
1

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

于 2015-12-10T14:05:14.063 回答
0

您可以尝试使用font-stretch CSS 属性：

font-stretch: condensed;

浏览器支持似乎是有限的——参见例如对这个其他答案的评论——但它在 Firefox 61 中对我有用。

于 2018-08-29T09:18:21.943 回答
0

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

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

scaleX 的值是您寻求的水平拉伸率（< 1 表示收缩，> 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>

于 2022-01-14T15:52:07.553 回答