使用 CSS 使字体更加简洁
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13786971/
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 a font more condensed with CSS
提问by Don P
Is there anyway to make letters closer together using CSS? I know we can adjust line-height but I didn't know if there is anything that squeeze a font closer together.
有没有办法使用 CSS 使字母靠得更近？我知道我们可以调整行高，但我不知道是否有任何东西可以将字体挤得更近。
回答by Zoltan Toth
回答by Jukka K. Korpela
The answer depends on what you mean by “font”, “condensed”, and “squeeze”.
答案取决于您所说的“字体”、“压缩”和“挤压”是什么意思。
You can select a more condensed typeface (specific font) for a font (from a font family), using the font-stretchproperty. But it does not squeeze anything; it just picks up a typeface that has been designed more condensed. Fonts commonly available in people's computers don't have such typefaces; some downloadable fonts (web fonts) do. And mostly you can use them in a more cross-browser way by using just a specific typeface name as if it were a font family name, e.g. font-family: Arial Narrow. (Note: Arial Narrow is available on some computers only, far less often than the basic Arial.)
您可以使用font-stretch属性为字体（来自字体系列）选择更简洁的字体（特定字体）。但它不会挤压任何东西；它只是选择了一种设计得更简洁的字体。人们计算机中常见的字体没有这种字体；一些可下载的字体（网络字体）可以。大多数情况下，您可以通过仅使用特定字体名称（就好像它是字体系列名称一样）以更跨浏览器的方式使用它们，例如font-family: Arial Narrow. （注意：Arial Narrow 仅在某些计算机上可用，远低于基本的 Arial。）
You can use certain CSS techniques to suggest kerning, if the font used has kerning information in OpenType format. Most fonts commonly used on web pages have no such information. (Exceptions: Palatino Linotype, Times New Roman, and Microsoft C fonts like Calibri and Cambria.) Suitable declarations:
如果使用的字体具有 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";
}
The effect of these settings, if any, tends to be rather small. It does not really mean “squeezing” in any brute sense. Rather, it modifies the rendering in subtle way to be typographically better; the text width may become slightly smaller, but that's just a coincidental byproduct.
这些设置的影响（如果有的话）往往相当小。它并不真正意味着任何粗暴意义上的“挤压”。相反，它以微妙的方式修改渲染以使其在排版上更好；文本宽度可能会稍微变小，但这只是一个巧合的副产品。
If you use a negative letter-spacing, that means brute squeezing. It may occasionally make sense e.g. for sans-serif text in large size, with small values like letter-spacing: 0.03em. Even then, the result should be evaluated, especially paying attention to letter combinations that may look odd when squeezed (eg., “rl” or “te”). And mostly, if you think letters are spaced too much apart, or the text gets too wide, considering using another font rather than disrupting the normal display of a font.
如果您使用负数letter-spacing，则意味着粗暴挤压。它有时可能有意义，例如对于大尺寸的无衬线文本，具有像letter-spacing: 0.03em. 即便如此，也应评估结果，尤其要注意挤压时可能看起来很奇怪的字母组合（例如，“rl”或“te”）。大多数情况下，如果您认为字母间距太大，或者文本太宽，请考虑使用另一种字体而不是破坏字体的正常显示。
回答by Paul Sullivan
You can specify the distance between all letters with
您可以指定所有字母之间的距离
letter-spacing: 0.1em;
but you can't kern individual letters unless you wrap each letter in a span
但是除非您将每个字母都包裹在一个跨度中，否则您无法对单个字母进行字距调整
回答by nodws
Recommended
受到推崇的
IF the font variant contains narrow versions you can use
font-stretch: condensed;
如果字体变体包含您可以使用的窄版本
font-stretch: condensed;
Not Recommended
不建议
If not then you might end up using scale()
transform: scale(.8,1);
如果没有，那么您最终可能会使用 scale()
transform: scale(.8,1);
