使用CSS将字体变得更加紧凑

Question

有没有使用CSS可以让字母更紧凑的方法？我知道我们可以调整行高，但我不知道是否有任何方法可以将字体挤得更紧密。

- Don P

---

可能是重复的问题：有没有一种跨浏览器的方法来压缩页面上的文本？ - Dan Dascalescu

Answer 1

你正在寻找 letter-spacing。

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

参考资料

- Zoltan Toth

Answer 2

答案取决于您所指的“字体”、“压缩”和“挤压”是什么意思。

您可以使用font-stretch属性为字体（来自字体系列）选择更紧凑的字体（特定字体）。但它并不会挤压任何东西; 它只是选择一个被设计得更紧凑的字体。人们计算机上常见的字体没有这样的字体; 一些可下载的字体（Web字体）有。并且大多数情况下，您可以通过仅使用特定字体名称作为字体系列名称来以更跨浏览器的方式使用它们，例如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”）。大多数情况下，如果您认为字母间距太大，或者文本过宽，就应考虑使用其他字体而不是破坏字体的正常显示。

- Jukka K. Korpela

Answer 3

您可以使用以下方法指定所有字母之间的距离:

letter-spacing: 0.1em;

但是，如果你想对单个字母进行字距调整，你需要将每个字母放入一个标签中。

- Paul Sullivan

Answer 4

推荐

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

不推荐

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

- nodws

---

缩放方法并不是最理想的，但在紧急情况下它帮了我一个大忙。谢谢！ - nickfindley