使用CSS更加浓缩字体

时间:2012-12-09 11:27:31

标签: css css3 fonts

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

4 个答案:

答案 0 :(得分:31)

您正在寻找letter-spacing

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

Reference

答案 1 :(得分:8)

答案取决于你所说的“字体”,“浓缩”和“挤压”。

您可以使用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,则表示粗暴挤压。偶尔可能有意义,例如对于大尺寸的sans-serif文本,其值较小,如letter-spacing: 0.03em。即使这样,也应该评估结果,尤其要注意在挤压时看起来很奇怪的字母组合(例如,“rl”或“te”)。大多数情况下,如果你认为字母间隔太大,或者文字太宽,考虑使用另一种字体而不是破坏字体的正常显示。

答案 2 :(得分:6)

您可以使用

指定所有字母之间的距离
letter-spacing: 0.1em;

但除非你将每个字母包裹在一个范围

中,否则你不能克服个别字母

答案 3 :(得分:0)

<强>推荐

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

不推荐

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