CSS之字体

字体族

字体族使用font-family 属性声明的。适用于所有元素。
当我们想要对文档中的字体进行设置时，就可以通过font-family这个属性。通过这个属性，我们可以指定字体。比如：

p {
	font-family:Georgia;
}

设置之后，用户代理会使用Georgia字体显示文档中所有的p元素。如果用户代理没有找到Georgia字体，那么就会忽略该字体使用默认字体。
因此，为了防止用户代理中无我们设置的字体类型从而使用默认样式，建议始终在font-family规则中指定通用字体族。这样相当于提供一种后备机制，在用户代理找不到匹配的字体时，选择一个字体代替。

p {
	font-family: Arial, sans-serif;
}

我们可以设置多款字体，各个字体之间使用逗号间隔。对于逗号间隔的多个字体族，用户代理会按照所列的顺序查找字体。直到找到用户代理支持的或者是最后任意一款通用字体族中的字体。

如果一个字体名称中存在空格，如New York，或在字体名称中有符号，如#，$， 则在使用时要把该字体名称放在引号里。

p {
	font-family: Wedgie, 'Karrank%' sans-serif;
}

如果没有引号，那么用户代理可能会忽略Karrank%字体。但是注意把带有引号的字体名称放在引号里不是强制要求，只是推荐做法。但是如果字体族的名称和font-family中的关键字同名，则必须要加引号

p {
	font-family:Author, "cursive", cursive;
}

正如上面，名为"cursive"的字体，他的名字一定要加上引号，这样才能和关键字cursive区分开。

如果把通用字体族的名称，如serif 放在引号中，用户代理就会假设你设置的是一款字体的名称，而不是指通用字体族。

@font-face规则

CSS中支持我们使用自定义的字体，并通过@font-face这一规则实现。

@font-face是惰性加载字型的。这表明，仅当需要使用指定的字型渲染文本时，才会加载，否则不加载。

定义字体的全部参数都写在@font-face{ }结构中，这些参数称为描述符，其格式和平常的样式规则一样，为：descriptor: value;的形式。
有两个必须的参数：font-family和 src

• 此处的font-family和上面的就有些不同了，此处的是字体族描述符，上面的则是字体族属性。简单理解，此处的font-family用于定义自定义的字体的名称，上面的font-family则是用于引用，为文本应用字型。

• src为定义的字型提供一个或多个源。对于有多个源，各个源之间使用逗号间隔。对于具有以逗号间隔的多个源来说，一旦用户代理无法从第一个源下载，就会尝试从下一个源进行下载。字型的源可以指向任何URI，不过有个限制：字型必须和样式表同源。因此，不能把src指向别人的网站，下载别人的字体。

  • format() 如果想告诉用户代理所使用的字体是什么格式的，可以使用可选的format()

  	@font-family {
  		font-family: "Switaa";
  		src:url("Switaa.otf") format("opentype");
  }
  

    这样做的好处是可以让用户代理跳过不支持的字体格式，加快加载速度。
  

  format()还可以为不带有常规扩展名的字体文件指定格式，以防用户代理不识别。

  @font-family {
  	font-family: 'Switee';
  	src:url("Switee.otf") format('opentype'),
  		url("Switee.true") format('truetype');
  }
  

  • local() 使用local()可以指定安装到用户设备中的字体族名称。（可以是多个）

  @font-face {
  	font-family:"Switee";
  	src:local("Switee"),
  		local("SwiteeADF");
  }
  

除了必选的font-family和src描述符外，还有几个可选的描述符。

描述符	默认值	说明
font-weight	normal	区分不同的字重
font-style	normal	区分常规、斜体和倾斜字体
font-stretch	normal	区分不同的字符宽度
font-variant	normal	区分众多字型变体
font-feature-settings	normal	直接访问OpenType的低层特性
unicode-range	U+0-10FFFF	定义直接字体中可用的字符范围

字重 font-weight

取值：normal bold bolder lighter 100 200 300 400 500 600 700 800 900
一般来说，字重越大，字体越黑，越粗。
字重的工作方式：

字重分为九级。100是最细的，900是最粗的。
但是，CSS规范只是说，每个数字对应的权重至少和前面的数字具有相同的字重。因此，100、200、300、400可能对应于同样细的字体；500，600对应于同样粗的字体；700、800、900则对应同样较粗的字体。只要后面的数字关键字对应的粗细不必前面的数字关键字细就行。

400 对应normal , 700对应于bold.
如果给定字体族中字重的等级少于9级，用户代理会以以下方式填补空缺：

• 如果500未分配，与400对应的字重一样。
• 如果300未分配，则查找相较于400细的那个变体，如果没有，则字重和400一样。200和100也是这样处理的。
• 如果600未分配，将其对应于较500黑的那个变体。如果没有，则字重与500一样，700，800和900也是这样处理的。

字号font-size

字号的取值可以是绝对值、百分数、em、长度单位。
绝对值为：xx-small , x-small , small , medium , large , x-large , xx-large.

字形font-style

normal 、italic(斜体)、oblique（倾斜体）

自动调整字号font-size-adjust

有两个因素影响字体是否清晰：字号和x高度。
x高度除以字号得到的结果称为高宽比值。字号越大，宽高比值越小，字体越模糊；反之，字体越清晰。而font-size-adjust用于改变字体族间的宽高比值。
计算公式：

设定的font-size值 * (font-size-adjust值 / 字体的宽高比值 ) = 调整后的font-size