# 在 CSS 里使用：字体名、备用字体和多字重

> 适合谁看：已经引入了字体 CSS，要把字体用到页面具体位置、或要同时用多个字重的开发者。

## 字体名从 CSS 里抄

文风每款字 CSS 里声明的 `font-family` 名字格式不统一，有的是 `WF-` 开头，有的是 `windfonts-` 或 `wenfeng-` 开头。**以你引入的那份 CSS 为准**：在浏览器打开 CSS 地址，搜 `font-family`，复制引号里的内容。

```css
.article {
  font-family: "从 CSS 里抄的名字", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}
```

## 一定要写备用字体

- 字体分片还没下载完时，浏览器先用备用字体显示。
- 子集里没有的字，也用备用字体显示。
- 衬线类（宋体、仿宋、楷体）的备用写 `"Songti SC", "SimSun", serif`；黑体类写上面那组，最后是 `sans-serif`。

## 多个字重

同一款字的每个字重是一份单独的 CSS。需要几个字重就引入几份：

```html
<link rel="stylesheet" href="https://cn.windfonts.com/fonts-packages/syhtsc/Regular/full/result.css">
<link rel="stylesheet" href="https://cn.windfonts.com/fonts-packages/syhtsc/Bold/full/result.css">
```

这几份 CSS 的 `font-family` 通常是同一个名字，用 `font-weight` 区分：

```css
body { font-family: "从 CSS 里抄的名字", sans-serif; font-weight: 400; }
h1, h2, strong { font-weight: 700; }
```

每份 CSS 的 `font-weight` 数值同样要在 CSS 里看，不要按字重名去猜。例如有的字 `Heavy` 声明为 900；有的字的 `Text`、`Normal` 和 `Regular` 都声明为 400；还有只有一档 `Bold` 的字，CSS 里声明的却是 400。

**两份 CSS 声明了相同的 `font-weight`，后引入的会盖住先引入的。** 这种情况只引入其中一份。

## 只有一个字重的字

有些字只有一档，例如得意黑只有 `Oblique`，猫啃什锦黑只有 `Bold`。

- 不要再给它加 `font-weight: bold` 或 `font-style: italic`。CSS 里没有对应的声明时，浏览器会自己把字加粗或拉斜，效果很差。
- 可以加上 `font-synthesis: none;` 禁止浏览器自己加粗、拉斜，见 MDN：[font-synthesis](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Properties/font-synthesis)。

## 只用在标题上

只想让标题用这款字，把 `font-family` 写在标题选择器上即可。正文不用这款字时，浏览器不会下载正文用到的分片。

```css
h1, h2 { font-family: "从 CSS 里抄的名字", "PingFang SC", "Microsoft YaHei", sans-serif; }
```

## 用 @import

也可以在 CSS 文件里写：

```css
@import url("https://cn.windfonts.com/fonts-packages/syhtsc/Regular/full/result.css");
```

`@import` 必须写在 CSS 文件的最前面。它比 `<link>` 晚一步才开始下载，首屏用到的字体优先用 `<link>`。

## 接下来读什么

- [《性能：子集、字体显示策略和预连接》](https://docs.cocobook.com/link/650)
- `@font-face` 的通用写法：[《在网页里使用字体：@font-face 的现代写法》](https://docs.cocobook.com/link/133)