使用CSS更加浓缩字体

Question

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

Answer 1

您正在寻找letter-spacing

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

Reference

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);