如何正确使用 @font-face 为系统字体创建别名（alias）-html教程-PHP中文网

如何正确使用 @font-face 为系统字体创建别名（alias）

@font-face 中通过 local() 引用系统字体时，若字体名称不匹配实际注册名（如缺少连字符、权重后缀），浏览器将忽略声明；需使用系统中真实存在的完整字体名（如 PingFangSC-Regular），且不同字重需分别定义。

`@font-face` 中通过 `local()` 引用系统字体时，若字体名称不匹配实际注册名（如缺少连字符、权重后缀），浏览器将忽略声明；需使用系统中真实存在的完整字体名（如 `pingfangsc-regular`），且不同字重需分别定义。

在 Web 开发中，我们常希望通过 @font-face 为系统已安装字体创建语义化别名（例如将 "PingFang SC" 映射为 "Test"），以提升 CSS 可维护性或实现字体降级策略。但实践中，类似以下声明往往静默失效：

@font-face {
  font-family: "Test";
  src: local(PingFang SC); /* ❌ 错误：含空格且未指定具体变体 */
}

根本原因在于：local() 函数不接受带空格的通用字体族名（如 "PingFang SC"），它匹配的是操作系统中注册的精确字体全名（Full Font Name），而 macOS 系统中 PingFang 系列的真实注册名通常为 PingFangSC-Regular、PingFangSC-Medium、PingFangSC-Semibold 等（无空格，含权重后缀）。

✅ 正确做法是：

确认真实字体名：可通过 macOS 字体册（Font Book）双击字体 → “信息”面板查看“全名”（Full Name），或使用命令行：
```
fc-list | grep -i pingfang
# 输出示例：/System/Library/Fonts/PingFang.ttc: PingFang SC:style=Regular,Normal,obyčejné,Standard,Κανονικά,Normaali,Normálne,Standaard,Normalny,Обычный,Navadno,Stándard
```
注意：.ttc 文件中每个字重是独立子字体，fc-list 显示的 PingFang SC 是显示名，实际 local() 需用内部全名（如 PingFangSC-Regular）。

为每个字重单独声明（必须）：

@font-face {
  font-family: "Test";
  font-weight: 400;
  src: local(PingFangSC-Regular);
}
@font-face {
  font-family: "Test";
  font-weight: 500;
  src: local(PingFangSC-Medium);
}
@font-face {
  font-family: "Test";
  font-weight: 600;
  src: local(PingFangSC-Semibold);
}

CSS 使用时需显式指定 font-weight，否则浏览器可能回退到默认 normal（即 400），导致样式不一致：

.text {
  font-family: "Test", "PingFang SC", sans-serif;
  font-weight: 500; /* 必须匹配对应 @font-face 的 weight */
}

⚠️ 注意事项：

local() 不支持通配符或模糊匹配，拼写、大小写、连字符缺一不可；
Safari 对 local() 支持最严格，Chrome/Firefox 相对宽松但仍有差异，建议始终以 fc-list 或字体册为准；
无法用单条 @font-face 覆盖整个字体族（所有字重），必须按 font-weight + font-style 组合逐一声明；
若仅需别名且不涉及自定义字体文件，更稳妥的方式是直接在 font-family 列表中使用原字体名（如 "Test", "PingFang SC", sans-serif），而非依赖 local() 别名。