# 写对 @font-face：字体名、字重和 local() > 适合谁看：自己写 `@font-face`、或自己部署多字重字体的开发者。 `@font-face` 写错了，浏览器多半不会报错，只会悄悄用错字体、自己加粗，或者多下载文件。下面是几条容易忽略的正确写法。 ## 一个家族，一个名字 同一款字的不同字重，`font-family` 应该写**同一个名字**，用 `font-weight` 区分： ```css @font-face { font-family: "My Sans"; src: url("my-sans-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "My Sans"; src: url("my-sans-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } ``` 这样页面里写 `font-family: "My Sans"`，正文自动用 400，``、`

` 自动用 700。 如果每个字重起不同的名字（如 `"My Sans Regular"`、`"My Sans Bold"`），浏览器会把它们当成两款字。给 `` 加粗时，它找不到同名的 700，就会把 400 **人工加粗**，效果很差。 ## 字重数值要和文件对应 `font-weight` 要写这个文件实际的粗细。常见对应关系： | 数值 | 常见名称 | |---|---| | 100 | Thin、Hairline | | 200 | ExtraLight、UltraLight | | 300 | Light | | 400 | Regular、Normal | | 500 | Medium | | 600 | SemiBold、DemiBold | | 700 | Bold | | 800 | ExtraBold、UltraBold | | 900 | Black、Heavy | 字体文件 `OS/2` 表里的 `usWeightClass` 记录了厂商给的数值，可以用它来对照。 两点要注意： - **同一个名字下，两条 `@font-face` 不要声明相同的字重和样式。** 浏览器会按自己的规则选一个，结果不可控。 - **只有一档的字，就只声明这一档。** 不要把一份 Bold 文件声明成 400，也不要给只有一档的字加 `font-weight: bold`。可以用 `font-synthesis: none` 禁止浏览器人工加粗和拉斜，见[《在 CSS 里使用：字体名、备用字体和多字重》](https://docs.cocobook.com/link/649)。 ## 可变字体写一个范围 可变字体一个文件包含连续的字重，用两个值写范围： ```css @font-face { font-family: "My Sans VF"; src: url("my-sans-vf.woff2") format("woff2"); font-weight: 100 900; } ``` ## local() 的正确写法 `local()` 让浏览器先找用户电脑上装好的同名字体，找到了就不下载。写法要点： - 括号里写**字体的完整名称（Full Name）或 PostScript 名**，不是家族名； - **一个 `local()` 只写一个名字**，有多个候选就写多个 `local()`，用逗号隔开； - 名字加引号。 ```css src: local("Source Han Sans SC Regular"), local("SourceHanSansSC-Regular"), url("source-han-sans-sc-regular.woff2") format("woff2"); ``` 什么时候**不要**用 `local()`： - 字体被拆成很多分片时，本地装的版本可能和分片的版本不同，字形、字距、覆盖的字都可能不一致； - 名字太常见时，可能匹配到用户电脑上另一款同名字体。 拿不准就不写 `local()`，只写 `url()`。 ## 记得 format() `format("woff2")` 告诉浏览器文件格式，不支持的格式会直接跳过，不会白白下载。今天所有主流浏览器都支持 WOFF2，一般只提供 WOFF2 就够了。