前端学习——CSS初学__3 CSS字体属性

CSS Fonts（字体）属性用于定义字体系列，大小，粗细和文字样式。

1.字体系列

CSS使用font-family属性定义文本的字体系列。

p {font-family:'微软雅黑';}
div {font-family:Arial,'Microsoft Yahei','微软雅黑'}

注：各种字体之间必须使用英文状态下的逗号隔开，如果有空格隔开的多个单词组成的字体一般加单引号。使用多个字体时，浏览器打开后首先判断电脑是否装有第一个字体，若有则使用第一个字体进行显示，若没有进行判断电脑是否装有第二个字体，以此类推。若都没有则使用电脑默认字体。

页面开发时常对body指定字体如：

body{font-family: 'Microsoft Yahei',tahoma,arial,"Hiragino Sans GB';}

2.字体大小

CSS使用font-size属性定义字体大小。语法规范：

p {
   font-size: 20px;
}

页面开发时常对body指定字体大小，标题需要单独指定文字大小，如下：

<style>
 body {
    font-size: 16px;
}
 h2 {
    font-size: 18px;
}
</style>

3.字体粗细

CSS使用font-weight属性设置文本字体粗细，实际开发中推荐使用number(数字)设置，如下：

.bold{
      font-weight: 700;
}

number可以选择100、200、300、400、500、600、700、800、900

正常字体大小即默认normal等于400，加粗字体即bold属性等于700。

4.文字样式

CSS使用font-style设置文本的风格。语法格式如下：

p {
   font-style: normal;
}

属性值如下：

3.5字体复合属性

字体属性可以将上述样式综合起来写，节省代码。语法规范如下：

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

注意这句话是语法规范，顺序是不可以改变的！所以可以举例如下：

div {
  font: italic 700 16px/20px 'Microsoft yahei';
}

不需要的属性可以省略（取默认值），但是必须保留font-size和font-family属性，否则font属性将不起作用。如下：

div {
  font: 16px 'Microsoft yahei';
}

3.6字体属性总结