CSS如何在字体不支持小型大写特性时实现缩写的小型大写样式

你这种场景直接通过CSS给<abbr>标签统一加样式即可，不需要修改现有HTML结构，所有重复出现的缩写可以自动生效，完全符合西语排版规范要求：

实现逻辑 #

• 优先用标准的font-variant: small-caps属性，浏览器会先尝试调用字体原生的小型大写字符集，要是字体不支持，会自动触发模拟机制
• 补充额外的微调属性，解决默认模拟容易出现的字重偏轻、字间距太密的问题，效果和原生小型大写几乎没有差异
• 用相对单位做适配，不管是标题里的缩写还是正文里的缩写，都能自动匹配上下文的字号比例

完整修改后的代码 #

CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

h1,p {
  font-family: Nunito;
}

h1 {
  font-size: 2em;
  line-height: 1em;
  font-weight: 600;
}

p {
  font-size: 1em;
}

/* 新增小型大写样式 */
abbr {
  font-variant: small-caps;
  /* 以下参数可根据实际字体效果微调 */
  font-size: 0.85em; /* 小型大写字号一般为上下文的80%-90% */
  font-weight: 600; /* 补偿缩放后变细的字重 */
  letter-spacing: 0.03em; /* 对齐小型大写的标准字间距要求 */
  text-decoration: none; /* 取消abbr标签默认的下划线，不需要可以删掉 */
}

HTML代码（已翻译为中文） #

<h1>给狗狗洗澡最好的<abbr>SOAP</abbr>是哪款</h1>
<p>给狗狗用<abbr>SOAP</abbr>洗澡本来不是难事。但你买到的<abbr>SOAP</abbr>可能闻起来像猫味，这会严重影响宠物的性格。你给狗狗用<abbr>SOAP</abbr>之前，得先找个人试一下，确保这款<abbr>SOAP</abbr>不会招其他害虫。你可以盯着被你偷偷换了<abbr>SOAP</abbr>的人，记录他和其他生物的互动情况</p>

方案优势 #

• 维护成本低：只需要加一次样式，所有页面里用<abbr>包裹的产品缩写都会自动应用效果，适合你这种多次重复展示的场景
• 适配性好：用相对单位em做字号，会自动跟着上下文的文字大小调整，不需要分别给标题、正文写不同的样式
• 兼容性强：所有主流浏览器都支持，不需要额外引入其他资源

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