跳转到主要内容

写对 @font-face：字体名、字重和 local()

适合谁看：自己写 @font-face、或自己部署多字重字体的开发者。

@font-face 写错了，浏览器多半不会报错，只会悄悄用错字体、自己加粗，或者多下载文件。下面是几条容易忽略的正确写法。

一个家族，一个名字

同一款字的不同字重，font-family 应该写同一个名字，用 font-weight 区分：

@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，<strong>、<h1> 自动用 700。

如果每个字重起不同的名字（如 "My Sans Regular"、"My Sans Bold"），浏览器会把它们当成两款字。给 <strong> 加粗时，它找不到同名的 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 里使用：字体名、备用字体和多字重》。

可变字体写一个范围

可变字体一个文件包含连续的字重，用两个值写范围：

@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()，用逗号隔开；
  • 名字加引号。
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 就够了。

参考资料