使用 CSS 制作窄字符

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/1161242/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 20:51:56  来源:igfitidea点击:

Make narrow characters with CSS

cssfontswidth

提问by Alex

How do I reduce characters' width of Arial-like fonts with CSS?

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

采纳答案by Mike Robinson

You can't reduce character width, but you can reduce letter-spacing.

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

span {
 letter-spacing: 0px;
}

回答by MM.

Use narrow fonts in your font-family declaration. These are pretty common.

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

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

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

回答by Gumbo

Streching a font will be possible with the font-stretchproperty of CSS 3.

使用font-stretchCSS 3属性可以拉伸字体。

回答by Javarome

You can just scale your text. For instance:

您可以缩放文本。例如:

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

but beware of transform-originwhich can make your text move elsewhere (for example if you scale it with an origin at its center).

但要注意transform-origin这会使您的文本移动到其他地方(例如,如果您以原点为中心对其进行缩放)。

回答by Zero

you can use font-weight:in your css code for this

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

回答by oberlies

You can try to use the font-stretch CSS property:

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

font-stretch: condensed;

Browser support seems to be limited – see e.g. the comments to this other answer– but it worked for me in Firefox 61.

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