如何为大写文本定义自定义CSS @font-face规则？

好问题！要给大写文本单独指定自定义字体，其实有几种不同的思路，取决于你有没有专门的大写字体文件，或者字体本身有没有内置相关特性，我给你拆解一下：

1. 用专门的大写字体文件（精准匹配大写字母） #

如果你手上有专门的大写版本字体文件（比如全部是大写字母的woff文件），可以利用unicode-range属性让浏览器只在渲染大写字母时加载这个字体，完美和你已有的不同字重字体配合：

/* 你已有的三个字重规则 */
@font-face { font-family: 'font-name'; src: url('../fonts/font-light.woff') format('woff'); font-weight: 300; }
@font-face { font-family: 'font-name'; src: url('../fonts/font-regular.woff') format('woff'); font-weight: normal; }
@font-face { font-family: 'font-name'; src: url('../fonts/font-bold.woff') format('woff'); font-weight: bold; }

/* 新增的大写字体规则 */
@font-face {
  font-family: 'font-name'; /* 和主字体同名，这样不用改现有选择器 */
  src: url('../fonts/font-allcaps.woff') format('woff');
  font-weight: normal; /* 对应你想要匹配的主字体字重，比如regular */
  unicode-range: U+41-5A; /* 只匹配A-Z的ASCII大写字母，若需要其他语言大写可补充范围 */
}

这样设置后，浏览器会自动为文本中的大写字母加载这个专门的字体，其他字符依然沿用对应字重的原字体，非常省心。

2. 利用字体内置的大写特性（无需额外字体文件） #

很多现代专业字体内置了不同的大写变体，比如小型大写（small-caps）、标题大写（titling caps）等，这时候不需要额外定义@font-face，直接用CSS启用这些特性即可：

启用小型大写 #

.small-caps-text {
  font-variant: small-caps;
  /* 或者更精细的底层控制：font-feature-settings: 'smcp' on; */
}

启用标题大写（适合大标题的优雅大写） #

如果你的字体支持标题大写特性（通常字体文档会标注），可以这样：

.titling-caps-text {
  font-feature-settings: 'titl' on;
}

这种方法的前提是你的字体本身内置了这些特性，你可以用FontForge这类工具查看字体的特性标签确认。

3. 强制替换所有大写文本的字体（简单直接） #

如果你想让所有大写文本（包括强制转大写的文本）都用某个特定字体，也可以单独定义一个大写字体的@font-face，然后给目标元素指定这个字体：

/* 定义专门的大写字体 */
@font-face {
  font-family: 'font-name-caps';
  src: url('../fonts/font-allcaps.woff') format('woff');
  font-weight: normal;
}

/* 应用到需要大写的元素 */
.uppercase-text {
  font-family: 'font-name-caps', 'font-name', sans-serif;
  text-transform: uppercase; /* 可选：如果需要把小写文本强制转成大写 */
}

这种方法最直接，适合需要完全替换大写文本字体的场景。

一些注意事项 #

• unicode-range属性兼容性很好，现代浏览器（Chrome、Firefox、Safari、Edge）都支持；
• 如果用字体特性，一定要确认你的字体确实包含对应的特性，否则设置了也不会生效；
• 若需要支持非ASCII的大写字母（比如中文拼音大写、欧洲语言大写），记得补充unicode-range的范围。

内容的提问来源于stack exchange，提问作者zur4ik