详细总结CSS 字体属性

CSS 字体属性

  CSS Fonts(字体)属性用于定义字体系列（font-family: “Microsoft Yahei”, Arial）、大小（font-size: 20px）、粗细（font-weight: bold）、文字样式（font-style: normal）。

一、 字体系列（font-family）

  CSS 使用 font-family 属性定义文本的字体系列，即文字用什么字体显示。

• 语法：

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

• 注意点：

  1.各种字体之间必须使用英文状态下的逗号隔开，当给出多个字体时，浏览器依次选择系统拥有的字体渲染文字字体。

  2.一般情况下,如果有空格隔开的多个单词组成的字体那么就要加引号，例如上面的 Arial 字体名称没有空格隔开，则不需要加引号，而 Microsoft Yahei （即微软雅黑）字体名称中间有空格，则要用引号。

  3.尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示。

  4.最常见的几个字体：body {font-family: ‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’; }

二、 字体大小（font-size）

  CSS 使用 font-size 属性定义字体大小。

• 语法：

  p {
    font-size: 20px;
  }
  

• 注意点：

  1.字体大小单位是像素（px），是我们网页的最常用的单位。

  2.谷歌浏览器默认的文字大小为16px。

  3.不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。

  4.可以给 body 指定整个页面文字的大小。

三、 字体粗细（font-weight）

  CSS 使用 font-weight 属性设置文本字体的粗细。

• 语法：

  p {
    font-weight: bold;
  }
  

• 属性值介绍

  属性值	描述
  normal	默认值（不加粗的）400
  bold	定义粗体 700
  100-900	400及是 normal, 700 及是 bold ，注意这个数字后没有单位

• 注意点

  1.该属性常用于让加粗标签(比如 h 和 strong 等) 不加粗，或者其他标签加粗。

  2.实际开发时，我们更喜欢用数字表示粗细。

四、 文字样式（font-style）

  CSS 使用 font-style 属性设置文本的风格。

• 语法：

  p {
    font-style: normal;
  }
  

• 属性值介绍：

  属性值	描述
  normal	默认值。浏览器显示一个标准的字体样式。
  italic	浏览器会显示一个斜体的字体样式。
  oblique	浏览器会显示一个倾斜的字体样式。
  inherit	规定应该从父元素继承字体样式。

• 注意：

  1.平时我们很少给文字加斜体，反而要给斜体标签(em，i)改为不倾斜字体。

五、 字体的复合属性

• 语法：

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

• 注意点：

  1.使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开。

  2.不需要设置的属性可以省略(取默认值)，但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用。