CSS字体基础详解

1 CSS字体

1.1 字体样式

font-style 设置字体样式

• normal：指定⽂本字体样式为正常的字体

• italic：指定⽂本字体样式为斜体。

.normal {
    font-style:normal
}
.italic {
    font-style:italic
}

1.2 文本字体

font-family 属性设置⽂本的字体

font-family 属性应该设置⼏个字体名称作为⼀种"后备"机制，如果浏览器不⽀持第⼀种字体，他将尝试下 ⼀种字体

p {
    font-family:"Times New Roman", Times, serif;
}

1.3 字体粗细

font-weight：定义字体粗细

• normal：正常的字体。相当于number为400

• bold：粗体。相当于number为700

• bolder：特粗体。也相当于strong和b标签的作⽤

• lighter：细体

• <integer>：⽤数字表示⽂本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

p.normal {
    font-weight: normal;
}
p.thick {
    font-weight: bold;
}
p.thicker {
    font-weight: 900;
}

1.4 字体⼤⼩

font-size：定义字体⼤⼩

• 把字体的尺⼨设置为不同的尺⼨。可选参数值：xx-small | x-small | small | medium | large | x-large | xx-large

• 相对于⽗对像中字体尺⼨进⾏相对调节。使⽤成⽐例的em单位计算。可选参数值：smaller | larger

• ⽤数值指定⽂字⼤⼩。不允许负值

• ⽤百分⽐指定⽂字⼤⼩。其百分⽐取值是基于⽗对象中字体的尺⼨。不允许负值

/* 设定段落⽂字⼤⼩为⾮常⼤ */
p { font-size: xx-large }
/* 设定⼀级标题的⽂字⼤⼩为2.5倍⼤⼩ */
h1 { font-size: 250% }
/* 设定span⾥的⽂字⼤⼩为16px */ 
span { font-size: 16px; } 
.larger { font-size: larger; }
.point { font-size: 24em; } 
.percent { font-size: 200%;}

1.5 字体行高

lin-height：设置行高

• normal：默认值。

• <length>：⽤⻓度值指定⾏⾼。可以为负值。

• <percentage>：⽤百分⽐指定⾏⾼，其百分⽐取值是基于字体的⾼度尺⼨。可以为负值。

• <number>：设置数字，此数字是当前的字体⼤⼩的倍数。

p {
    line-height: normal;
}
p {
    line-height: 3.5;
}
p {
    line-height: 3em;
}
p {
    line-height: 34%;
}

1.6 综合设置

CSS字体属性font定义字体，加粗，⼤⼩，⽂字样式。 该属性是复合属性

font：<font-style> <font-weight> <font-size>/<line-height> <fon-family>
p {
    font:20px/1.5 '微软雅⿊'
}
p {
    font:bold 20px/30px '微软雅⿊'
}