font-family

字体格式。

请求到网页后,看到字体样式,先请求本地电脑字体库,如果没有就使用浏览器默认的。为了防止使用默认字体变丑的情况,可以在后边多写几个字体。

如果一定要下载自己的字体,可以用@font-face下载制定的字体。

font-style

字体样式,正常 & 斜体。

  • normal 正常
  • italic 斜体 使用设计时对应的斜体
  • oblique 斜体 只是把字体倾斜

font-size

字体大小,顶线和底线的距离。默认16px,会被继承。

font-weight

字体粗细,默认:400,加粗为700;取值为1-1000;如果一定要动,最好取整百的值,只需要记住400 700两个值即可。

line-height

一行文字所占据的高度,常用来给文字高度居中。

  • 行高:也就是line-height,指文本行基线间的垂直距离。上图任意两条相同颜色的垂直距离也是行高。
  • 行距:是指一行底线到下一行顶线的垂直距离,即第一行粉线和第二行绿线间的垂直距离。
  • 半行距:行距的一半。半行距 = (行高 - 字号) / 2。在 CSS 中的margin-top不是从文字的顶线算起,而是从顶线半行距的上方开始算起。同理,margin-bottom是从底线半行距的下方开始算起。
  • x-height:x字高,是指字母的基本高度,精确地说,就是基线baseline和主线mean line之间的距离。

font

我们想给一个元素添加字体样式的话,如果按照一行行添加实在太多了;因此有一个简写,即font,可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写。

  • 必须包含以下值:
  • 可以选择性包含以下值:
  • font-style, font-variant 和 font-weight 必须在 font-size 之前
  • 在 CSS 2.1 中 font-variant 只可以是 normal 和 small-caps
  • line-height 必须跟在 font-size 后面,由 “/“ 分隔,例如 “16px/3”
  • font-family 必须最后指定