CSS字体最佳实践

Question

我试图在我正在使用和学习的CSS模板中理解这个字体声明。大多数CSS教程都没有这样设置字体大小。它似乎确实有效，我只是想知道究竟发生了什么。

body{
font:300 15px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

300号码在做什么？为什么创作者会使用15px / 1.4的分数而不是像10px这样的东西？

此外，什么时候在字体上使用引号是合适的，什么时候不是？

Answer 1

这是以下的简写语法：

font-weight: 300;
font-size: 15px;
line-height: 1.4;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

字体重量

300只是字体重量的数字表示。默认值为400，“粗体”相当于700.这是一种具有许多不同权重的字体，可以让您很好地了解数字对应的内容：http://www.google.com/fonts/specimen/Source+Sans+Pro

线高

当数字不包含单位（如px，em等）时，它是字体大小的倍数。在这种情况下，15px * 1.4 = 21px，因此它相当于line-height: 21px。

字体系列

这是您首选字体的列表，按降序排列。如果用户没有安装Helvetica Neue，它将回退到Helvetica。如果他们没有那个，它将回归Arial。如果他们没有，它将使用浏览器的默认sans-serif字体。在OSX和iOS中，那是Helvetica，在Windows上它是Arial，在Android上它是Droid Sans或Roboto，具体取决于版本。

Answer 2

300 - 字体粗细

15px / 1.4 - FONT尺寸/线高

字体 - ＆＃39; Helvetica Neue＆＃39;单引号优先级字体

语法

body {
   font: font-style font-variant font-weight font-size/line-height font-family;
}

例如

body {
   font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;
}