font-size属性

设置文字的大小

  • 具体数值+单位

    • 30px;
  • 百分比
  • 基于父元素的font-size计算，比如50%表示等于父元素font-size的一半。

font-family 熟悉

设置文字的字体名称

  • 可以设置1个或者多个字体名称;
  • 浏览器会选择列表中第一个该计算机上有安装的字体;
  • 或者是通过 @font-face 指定的可以直接下载的字体; 
  1. body {
  2.     font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
  3. }

font-weight属性

用于设置文字的粗细

常见的取值:

  • 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 每一个数字表示一个重量;
  • normal：等于400
  • bold：等于700

strong、b、h1~h6等标签的font-weight默认就是bold

font-style属性

用于设置文字的常规、斜体显示

  • normal：常规显示
  • italic：用字体的斜体显示

em、i、cite、address、var、dfn等元素的font-style默认就是italic

line-height属性

用于设置文本的行高

注意区分height和line-height的区别

  • height：元素的整体高度;
  • line-height：元素中每一行文字所占据的高度;

应用实例：

div中只有一行文字，如何让这行文字在div内部垂直居中？

  • 设置line-height值等同于height值

font缩写属性

font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写;

顺序：

    font: font-size/line-height font-family font-style font-weight;

规则：

  • font-size、font-family不可以调换顺序，不可以省略;
  • font-style、font-variant、font-weight可以随意调换顺序，也可以省略;
  • /line-height可以省略，如果不省略，必须跟在font-size后面;
font: 14px/1.5 Helvetica Neue,Helvetica,Arial;