首页 > 代码库 > CSS字体的一些笔记

CSS字体的一些笔记

font

  • 是一个复合属性,如果要使用,必须有font-size和font-family(必须在font-size之后)
  • font-size/line-height简写格式,font-size总要在line-height之前
  • 使用font属性时,所有被忽略的值都会重置为默认值(要特别注意)

font-family(字体系列):

  • 有5种通用字体,serif(成比例,有上下短线),sans-serif(成比例,无上下短线),Monospace(等宽),Cursive(手写),Fantasy
  • 推荐结合字体名和通用字体一起使用
  • 什么时候用引号:
    • 当字体名中有空格,#和%之类的符号时
    • 当字体名中有匹配的关键字时(如果给通用字体加引号,用户代理将会认为你需要一个与此同名的特定字体,而不是通用字体系列了)

font-weight(字体加粗):

  • 关键字100~900(只要一个关键字对应的变形不细于前一个关键字对应的变形)
  • 400(Normal, Regular, Roman, Book)
  • 500(Medium)
  • 700(bold)
  • 没有设定500的粗度时,默认和400一样。
  • 没有指定300的粗度时,会指定成比400更细的变形。如果没有,那就和400一样。100,200同上。
  • 没有指定600的粗度时,会指定成比400更粗的变形,如果没有,和500一样。700~900同样适用。

font-size(字体大小):

  •  xx-small,x-small,small,medium(默认值),large,x-large,xx-large,smaller,larger(相对于父元素)
  • 作用是为给定字体提供em框的一个大小,并不能保证实际显示的字符是这样的大小。
  • 继承的值为计算值,而不是百分数值。(用户代理对像素大小进行取整,再由子元素正常继承)

font-style(字体风格):

  • 值:italic, oblique, normal(默认), inherit

font-variant(字体变形):

  • 值:small-caps, normal, inherit
  • small-caps为小型大写字母(会将小写字母变成小型大写字母)

 

CSS字体的一些笔记