字体

font

语法（[font-style]，[font-variant]， [font-weight]，font-size/[line-height]，font-family）
简写属性

  • font-style：字体样式
    • normal
    • italic：字体本身有斜体样式
    • oblique：浏览器使得字体倾斜显示
  • font-variant(不常用)
  • font-weight
  • font-size/line-height
  • font-family

例子

  1. font: italic small-caps bold 16px/2 cursive;

color

属性值

font-family

关键点1尽量写多个字体系列，JS引擎会按照顺序判断系统有没有该字体。
关键点2实际开发中字体系列放在body里

font-weight

属性值

  • 100-900整数值：400相当与normal，700相当于bold。

  • 关键字：normal、bold、bolder、lighter

    font-size

    语义字体的实际大小，不等于行盒line-height的高度。
    属性值

  • 关键字：xx-small | x-small | small | medium | large | x-large | xx-large ，默认值为absolute-size的medium值

    • em：继承父级字体大小。
    • rem：直接以根元素中的字体大小为基准，而不是父元素。
  • ：父元素字体大小为基准。

关键点实际开发中会在或者中设置font-size = 62.5%，使得基础字体大小为10px，便于后续设置rem的值。

font-style

属性值

  • normal：正常的字体版本。
  • italic：字体中的斜体版本，如果没有通过浏览器渲染。
  • oblique [deg]：对于可变字体可以精确控制字体的角度。