使用 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
Make narrow characters with CSS
提问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-stretch
property of CSS 3.
使用font-stretch
CSS 3的属性可以拉伸字体。
回答by Javarome
You can just scale your text. For instance:
您可以缩放文本。例如:
.my-text {
transform: scaleX(0.5);
}
but beware of transform-origin
which 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 中对我有用。