使用CSS更加浓缩字体

Question

无论如何使用CSS将字母靠近在一起？我知道我们可以调整行高,但我不知道是否有任何东西可以将字体挤得更近.

Answer 1

你在找 letter-spacing

#id { letter-spacing: -1px; }

参考

Answer 2

答案取决于你的意思是"字体","浓缩"和"挤压".

您可以使用font-stretch属性为字体(来自字体系列)选择更精简的字体(特定字体).但它并没有挤压任何东西; 它只是拿起一个设计得更浓缩的字体.人们通常在人们的计算机上使用的字体没有这样的字体; 一些可下载的字体(网络字体)呢.而且大多数情况下,您可以通过使用特定的字体名称以更加跨浏览的方式使用它们,就像它是一个字体系列名称一样,例如font-family: Arial Narrow.(注意:Arial Narrow仅在某些计算机上可用,远远少于基本的Arial.)

如果使用的字体具有OpenType格式的字距调整信息,则可以使用某些CSS技术来建议字距调整.网页上常用的大多数字体都没有此类信息.(例外:Palatino Linotype,Times New Roman和Microsoft C字体,如Calibri和Cambria.)合适的声明:

body { 
text-rendering: optimizeLegibility;
-webkit-font-feature-settings: "kern";
-moz-font-feature-settings: "kern";
font-feature-settings: "kern";
}

这些设置的效果(如果有的话)往往相当小.它并不意味着任何暴力意义上的"挤压".相反,它以微妙的方式修改渲染,以便在印刷方面更好; 文字宽度可能会略小,但这只是巧合的副产品.

如果使用负数letter-spacing,则表示粗暴挤压.它可能偶尔会有意义,例如大尺寸的无衬线文本,像小的值letter-spacing: 0.03em.即使这样,也应该评估结果,尤其要注意在挤压时看起来很奇怪的字母组合(例如,"rl"或"te").大多数情况下,如果你认为字母间隔太大,或者文字太宽,考虑使用另一种字体而不是破坏字体的正常显示.

Answer 3

您可以指定所有字母之间的距离

letter-spacing: 0.1em;

但除非你把每个字母包裹在一个跨度中,否则你不能克服单个字母

Answer 4

受到推崇的

如果字体变体包含您可以使用的窄版本 font-stretch: condensed;

不建议

如果没有那么你最终可能会使用scale() transform: scale(.8,1);