前端学习笔记64-字体的简写属性

font可以设置字体相关的所有属性
如果我们想设置字体大小和字体族，如何写？
之前的写法：

        div{
            border:1px red solid;
            font-size: 50px;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri;
        }

font简写法：

        div{
            border:1px red solid;
            font: 50px 'Gill Sans', 'Gill Sans MT', Calibri;
        }  

语法1

font：字体大小 字体族
font：字体大小/行高 字体族
注意，从上面的语法可以看到，行高可以不写，但是有个问题。看下面代码，

        div{
            line-height: 2;
            border:1px red solid;
            font: 50px 'Gill Sans', 'Gill Sans MT', Calibri;
        } 

这里代码我写了行高为字体的两倍，但是在font简写属性那里没有写行高，猜猜效果如何

行高的设置没有效果。

        div{
            border:1px red solid;
            font: 50px/2 'Gill Sans', 'Gill Sans MT', Calibri;
        } 

我在font给它设置行高后，就可以了。

所以如果用到了font，然后没有写行高，即使你在前面有设置height-line，浏览器也当做你没有设置。
要么就把height-line写在font后面，要么就在font里写上行高。

语法2

前面的语法中font-size和font-family是放在最后的，且是必须写的，它们的前面还可以写别的。

font：bold italic font-size font-family
font：italic bold font-size font-family
bold是加粗，italic是斜体。
这里讲讲两个属性

font-weight

一般我们用font-weight来设置字体加粗的。
normal为正常，bold为加粗。

    <style>
        div{
      
            line-height: 2;
            border:1px red solid;
            font: 50px 'Gill Sans', 'Gill Sans MT', Calibri;
            font-weight:bold
        }            
    style>

font-weight可以用100到900设置9个加粗级别。
但是实际上没有，我试了一下，100、200、300是同一个字体，400、500、600是同一个字体，700、800、900是同一个字体。
为啥呢？因为这样设置加粗的原理是我计算机有同一种的不同加粗效果的字体，从我的测试效果可知，我的Gill Sans字体只有三种不同的的加粗效果。

font-style

这个是设置字体风格的
italic为斜体，normal为正常。

和之前的行高一样，如果我在font中没设置加粗或斜体，即使我在前面有单独设置，也没有用。

        div{
            border:1px red solid;
            font-style: italic;
            font: 50px 'Gill Sans', 'Gill Sans MT', Calibri;
            
        } 

上面的代码我虽然设置了斜体，但是我在font中没有设置，所以没效果。必须得把font-style写在font的后面，或者在font中设置。

font还要其他的属性，可以在zeal中查，我懒得找了，用到了再说。