Skip to main content

字体

属性说明
font-style字体样式，斜体 or 标准体
font-variant字体变种，将英文字母的小写字母变为 "小个子" 大写字母
font-weight字体粗细
font-size字体大小
font-family字体族

font-style​

设置字体样式，是斜体还是标准体。

  • normal，默认值，标准字体样式
  • italic，显示字体的斜体
  • oblique，让字体倾斜

这里注意一下 italic 和 oblique 的区别：

一种字体有粗体、斜体、下划线、删除线等诸多属性。

但是并不是所有字体都做了这些，一些不常用的字体，或许就只有个正常体，如果你用 italic，就没有效果了~

这时候你就要用 oblique，可以理解成 italic 是使用文字的斜体，oblique 是让没有斜体属性的文字倾斜！

font-variant​

将文本中所有的小写字母转换为 "小个子" 大写字母。

  • normal，默认值
  • small-caps，小写字母变为 "小个子" 大写字母

详情参考

font-weight​

设置字体的粗细。

  • normal，默认值
  • lighter，细体
  • bold，粗体
  • bolder，更粗体
  • 100 ~ 900，其中 400 等同于 normal，700 等同于 bold

font-size​

设置字体大小。

以下为固定大小：

  • xx-small
  • x-small
  • small
  • medium，默认值
  • large
  • x-large
  • xx-large
  • length，设置一个固定大小，比如 16px

以下为相对大小：

  • smaller，比父元素的字体稍微小一点
  • larger，比父元素的字体稍微大一点
  • %，基于父元素字体的百分比

font-family​

字体族基础知识​

对于 CSS 中的 font-family 而言，它有两类取值。

  1. 一类是类似这样的具体的 字体族名 定义：font-family: Arial 这里定义了一个具体的字体样式，字体族名为 Arial;
  2. 一类是 通用字体族名，它是一种备选机制，用于在指定的字体不可用时给出较好的字体，类似这样：font-family: sans-serif 。

关于 通用字体族名，常用的有如下几类：

  • serif 衬线字体族，字符的一些边角比较花哨
  • sans-serif 非衬线字体族，辨识度高
  • monospace 等宽字体，即字体中每个字宽度相同
  • cursive 草书字体
  • fantasy 主要是那些具有特殊艺术效果的字体

所有具体的字体族名一般都有它所属的一个门类，这里的 通用字体族名 就可以理解字体族的门类。

font-family 可以取多个值，以逗号分隔，取值越前面的会进行试探性使用该字体，如果系统中不存在该字体则会向后兼容。如果字体名称包含空格，它必须加上引号。

缩写​

Reference​