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 +临

线高

当数字不包含单位(如px,em等)时,它是字体大小的倍数.在这种情况下,15px*1.4 = 21px,所以它相当于line-height: 21px.

字体系列

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