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：细体
• ：⽤数字表示⽂本字体粗细。取值范围：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：默认值。
• ：⽤⻓度值指定⾏⾼。可以为负值。
• ：⽤百分⽐指定⾏⾼，其百分⽐取值是基于字体的⾼度尺⼨。可以为负值。
• ：设置数字，此数字是当前的字体⼤⼩的倍数。

p {
    line-height: normal;
}
p {
    line-height: 35px;
}
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 '微软雅⿊'
}

2 引入外部字体

为了避免用户字体缺省，需要在服务器端设置好页面的字体样式，让网页以最佳方式进行展示 直接将下载好的字体复制到当前文件夹下（网站下载新字体） 想要使用外部字体，需要进行引入

<style type="text/css">
/* 第一步： 声明一个字体 */
@font-face {
    font-family: my-font;/*自定义名称*/
    src: url('时尚中黑简体.ttf');
}
@font-face {
    font-family: my-font2;
    src: url('迷你简双线体.ttf');
}
/* 第二步： 使用字体 */
p {
    font:50px my-font,sans-serif;
}
div {
    font:50px my-font2,sans-serif;
}
</style>
<p>
  这是一个段落标签
</p>