css学习笔记3（字体属性）

3.CSS字体属性

3.1字体大小

• 属性名：font-size

• 语法：

  div {
      font-size: 40px;
  }
  

• 注意点

  1. Chrome浏览器支持的最小文字为12px，默认的文字大小为16px，并且0px会自动消失。
  2. 不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小。
  3. 通常以给body设置font-size属性，这样body中的其他元素就都可以继承了。

• 借助控制台看样式：

  

3.2字体族

• 属性名：font-family

• 语法：

  div {
      font-family: "STCaiyun", "Microsoft YaHei", sans-serif;
  }
  

• 注意：

  1. 使用字体的英文名字兼容性会更好，具体的英文名可以自行查询，或在电脑的设置里去寻找。
  2. 如果字体名包含空格，必须使用引号包裹起来。
  3. 可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的，且通常在最好写上serif（衬线字体）或sans-serif（非衬线字体）。
  4. windows系统中，默认的字体是微软雅黑。

3.3字体风格

• 属性名：font-style

• 常用值：

  1. normal：正常（默认值）
  2. italic：斜体（使用字体自带的斜体效果）
  3. oblique：正常（强制倾斜产生的斜体效果）

  实现斜体时，更推荐使用italic。

• 语法：

  div {
      font-style: italic;
  }
  

3.4字体风格

• 属性名：font-weight

• 常用值：

  • 关键词

    1. lighter：细
    2. normal：正常
    3. bold：粗
    4. bolder：很粗（多数字体不支持）

  • 数值

    1. 100~1000且无单位，数值越大，字体越粗（或一样粗，具体得看字体设计时的精确程度）。
    2. 100~300等同于lighter，400~500等同于normal，600及以上等同于bold。

• 语法：

  div {
      font-weight: bold;
  }
  
  div {
      font-weight: 600;
  }
  

3.5字体复合写法

• 属性名：font，可以把上述字体样式合并成一个属性。
• 编写规则：
  1. 字体大小、字体族必须都写上。
  2. 字体族必须是最后一位、字体大小必须是倒数第二位。
  3. 各个属性间用空格隔开。
• 实际开发中更推荐复合写法，但这也不是绝对的，比如只想设置字体大小，那就直接用font-size属性。