字体

[xiongshj]

字体

这是学习《CSS 权威指南》第 5 章的笔记。

字体族

为了覆盖所有情况，CSS 定义了五种通用字体族：

• 衬线字体（serif）
• 无衬线字体（sans-serif）
• 等宽字体（monospace）
• 草书字体（cursive）
• 奇幻字体

字体族使用 font-family 属性声明。

使用 @font-face

@font-face 的作用是让你在设计中使用自定义的字体。

@font-face 是惰性加载字型的。

定义字体的全部参数都在 @font-face { } 结构中编写。这些参数称为描述符，与属性十分相似，格式为 descriptor: value;。

描述符中有两个是必需的：font-family 和 src。

@font-face {
  font-family: "SwitzeraADF";
  src: url("SwitzeraADF-Regular.otf");
}

h1 {
  font-family: SwitzeraADF, Helvetica, sans-serif;
}

src 描述符中以逗号分隔的列表用于提供后背字体文件。

@font-face {
  font-family: "SwitzeraADF";
  src: url("SwitzeraADF-Regular.otf"),
       url("/fonts/SwitzeraADF-Regular.otf");
}

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

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

这么做的好处是，让用户代理跳过不支持的字体格式，从而减少带宽用量，提升加载速度。

可用的格式值见表。

值	格式
embedded-opentype	EOT(Embedded OpenType)
opentype	OTF(OpenType)
svg	SVG(Scalable Vector Graphics)
truetype	TTF(TrueType)
woff	WOFF(Web Open Font Format)

除了使用 url() 和 format() 组合之外，还可以使用 local() 指定已经安装在用户设备中的字体族名称（可以是多个）。

@font-face {
  font-family: "SwitzeraADF";
  src: local("Switzera-Regular"),
       local("SwitzeraADF-Regular"),
       url("SwitzeraADF-Regular.otf") format("opentype"),
       url("SwitzeraADF-Regular.true") format("truetype");
}

借助这个功能可以为本地安装的字体自定义名称。

@font-face {
  font-family: "H";
  src: local("Helvetica"), local("Helvetica Neue");
}

h1, h2, h3 {
  font-family: H, sans-serif;
}

字体描述符

描述符	默认值	说明
font-style	normal	区分常规、斜体和倾斜字型
font-weight	normal	区分不同的字重（例如加粗）
font-stretch	normal	区分不同的字符宽度（例如紧缩和加宽）
font-variant	normal	区分众多字形变体（例如小号大写字母），在很多方面与 CSS 中的 font-feature-settings 很像
font-feature-settings	normal	直接访问 OpenType 的低层特性（例如启用连字）
unicode-range	U+0-10FFFF	定义指定字体中可用的字符范围

字重

CSS 中的 font-weight 属性可以精确控制字重。

font-weight 取值有 normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900。

增大字重：如果把一个元素的字重设为 bolder，用户代理首先要确定从父元素继承的 font-weight 值什么，然后选择比继承的字重高一级的最小数字。

减小字重：lighter 的工作方式类似，只不过是让用户代理向下减小字重。

使用 font-weight 描述符可以为字型指定 font-weight 属性支持的字重等级。

@font-face {
  font-family: "SwitzeraADF";
  font-weight: normal;
  src: url("f/SwitzeraADF-Regular.otf") format("opentype");
}

@font-face {
  font-family: "SwitzeraADF";
  font-weight: 300;
  src: url("f/SwitzeraADF-Light.otf") format("opentype");
}

h1, h4 {
  font: 225% SwitzeraADF, Helvetica, sans-serif;
}

h4 {
  font-size: 125%;
  font-weight: 300;
}

字号

字号 font-size 的取值有 xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | <length> | <percentage>。

font-size 支持的绝对大小值有七个：xx-small、x-small、small、medium、large、x-large 和 xx-large。这几个关键字没有固定的大小，而是相对而言的。

百分数始终根据继承自父元素的字号计算。

CSS 还把长度单位 em 定义为等效于百分数，对字号而言，1em 与 100% 的效果相同。

字号关键字和继承会导致实际大小缩水，这在某些浏览器渲染等宽文本时尤为明显。有个方法能绕开这个问题，而且对已知的浏览器都有效，具体方法如下：

p {
  font-size: medium; /* 默认值 */
  span {
    font-family: monospace, serif;
    font-size: 1em;
  }
}

其实这里就是在 font-family 中多加了个 serif。

有两个因素影响字体是否清晰易辨：字号和 x 高度。x 高度除以字号得到的结果称为高度比值。随着字号的减小，高度比值越高，字体越清晰易辨；相反，高度比值较低的字体，很容易变得模糊难辨。CSS 提供的 font-size-adjust 属性用于改变字体族之间的高度比值。

font-size-adjust 的取值有 <number> | none | auto。

默认值是 none，声明将禁止调整字号。

字形

font-style 属性的作用十分简单：在 normal（常规）、italic（斜体）和 oblique（倾斜体）之间做出选择。

字体拉伸

font-stretch 属性的取值有 normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded。

仅当使用的字体族中有宽体和窄体时，这个属性才起作用。

仅当使用的字体族中有加宽变体时，font-stretch: expanded 声明才起作用；如果没有加宽变体，什么也不会发生，即仍使用原来的字型。

截至 2017 年年末，macOS 和 iOS 中的 Safari 都不支持 font-stretch，Opera Mini 也不支持。

字距调整

有些字体定义了字符之间相对位置的数据，即字距。

字距可以使用 font-kerning 属性呼出或禁止。

font-kerning 的取值有 auto | normal | none。

none 的意思十分简单：让用户代理忽略字体中的字距信息。 normal 的意思是让用户代理正常处理字距，即是用字体中的字距数据。auto 则把决定权交给用户代理，让用户代理选择最合理的处理方式，当然具体怎么做由所用的字体决定。

字体变形

font-variant 描述符在 @font-face 规则中指明允许使用的变形能轻易覆盖属性中指定的字体变形。

字体特性

font-feature-settings 属性从低层控制 OpenType 字体的哪些特性可以使用（因此，不能用在 .woff 文件上）。

font-variant 描述符几乎涵盖 font-feature-settings 的一切功能，外加一些其他作用。CSS 规范明确建议创作人员使用 font-variant，只在想要的字体特性不在 font-variant 的取值范围内时才使用 font-feature-settings。

字体合成

font-synthesis 属性，取值有 none | weight || style。

初始值 weight style。

截至 2017 年年末，只有 Firefox 支持 font-synthesis 属性。

font 属性

font 属性必须的两个值是 font-size 和 font-family，而且必须以这样的顺序编写，其他值都是可选的。

font 属性还能设定 line-height 属性的值，尽管 line-height 是文本属性，而不是字体属性。设定的方法算是在 font-size 中增加一个值，以正斜线（/）分隔：

body {
  font-size: 12px;
}

h2 {
  font: bold italic 200%/1.2 Verdana, Helvetica, Arial, sans-serif;
}

小结

加油。