使用CSS制作窄角色

Question

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

Answer 1

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

span {
 letter-spacing: 0px;
}

@Val,我不知道你正在使用什么浏览器,但三年后,小数分数似乎不适用于Chrome 21. (3认同)
还需要小数部分(例如0.2px)和负数(例如-1px,-0.2px),因此您可以获得一些相当细粒度的控制. (2认同)
哦,和不同的单位,所以它可以是大小无关的:-1%, - 0.01em - 如果有问题的文字大小不一样方便. (2认同)
我相信，答案应该是：`letter-spacing：-1px;`，与`0px`一样，我们不会得到任何字母间距的减少。字体保持不变。是的，到目前为止（Chrome 26）Chrome仍不支持分数。 (2认同)

Answer 2

在font-family声明中使用窄字体.这些很常见.

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

Answer 3

使用font-stretchCSS 3的属性可以对字体进行拉伸.

@PrimozRome这就是我使用将来时态的原因. (20认同)
它仍然不受支持,自答案开始已经过去了6年.无论如何,谢谢你的回答.:) (4认同)
@YevgeniyAfanasyev不完全:[我可以使用... CSS`font-stretch`](http://caniuse.com/#feat=css-font-stretch) (4认同)
只是关于font-stretch的注释:font-stretch,受Firefox和IE支持,不会扩展或缩小任意字体.它只选择给定字体内最合适的面部.在任何情况下,它都无法神奇地解决原始问题.请参阅[关于字体拉伸在CSS字体3中如何工作的说明](https://developer.mozilla.org/en-US/docs/CSS/font-stretch). (2认同)

Answer 4

您可以缩放文本.例如:

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

但要注意transform-origin哪些可以使你的文本移动到其他地方(例如,如果你缩放它的原点在其中心).