CSS字体属性——CSS学习笔记（3）

3 CSS的字体属性

• CSS的fonts属性用于定义字体系列、大小、粗细、文字样式（斜体等）

3.1 字体系列

• 属性：font-family
• 语法：

  p {
    font-family: 'Microsoft Yahei';
  }
  div {
    font-family: Arial,'Microsoft Yahei'
  }
  

• 如果字体由多个用空格分隔的单词组成，要加引号。
• 多个字体要用英文的逗号隔开（顺序执行，如果电脑没有装第一个字体，则使用第二个，第二个也没有就使用第三个，依次类推）
• 尽量使用系统默认自带字体。
• 常见字体：‘Microsoft Yahei’,tahoma,arial,‘Hiragino Sans GB’
• 常见用法：直接选择body设置字体。

3.2 字体大小

• 属性：font-size
• 语法：

  body {
    font-size: 20px;
  }
  h1 {
    font-size: 30px;
  }
  //标题标签比较特殊，需要单独指定文字大小
  //运行结果:h1标题文字大小为30px，其余为20px
  

• px 像素 是网页中最常用的单位
• 尽量给一个明确的字号大小
• 常见用法：直接选择body设置字体。

3.3 字体粗细

• 属性：font-weight
• 属性值：
  • normal:默认字体
  • bold：加粗
  • bolder:比加粗更粗
  • number（最常用,无需加单位，直接写数字）:700(=bold)、400(=normal)
    • 例：

    .bold {
      font-weight: 700;
    }
    

3.4 文字样式

• 属性：font-style
• 属性值：
  • normal（最常用）：默认值，可以让原本倾斜的字体变正常
  • italic：斜体

3.5 字体复合属性

• 即把之前的内容综合起来并简写
• 不能更换font属性顺序，各个属性用空格隔开
• 不需要的属性可以省略or取默认值，但必须保留font-size和font-family。也就是font-style、font-weight、line-height可以省略。
• 例：可以把

  div {
    font-style: italic;
    font-weight: 700;
    font-size: 16px;
    font-family: 'Microsoft yahei';
  }
  

  改为

  div {
    /*严格按照此顺序：font: font-style font-weight font-size/line-height font-family;*/
    font:italic 700 16px 'Microsoft yahei';
  }