CSS字体的一些笔记

Posted 2020-08-07

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为小型大写字母（会将小写字母变成小型大写字母）