如何在CSS或JavaScript中根据文本大小写应用特定字体变体？

我之前也碰到过类似的开源字体变体适配问题，给你分享几个靠谱的解决思路，优先推荐CSS方案，毕竟更高效也符合Web标准：

这类问题大多是因为浏览器不会自动识别字体内置的不同字符变体，得我们手动指定规则：

1. 用语义化的 font-variant 属性 #

现代CSS提供了专门控制字体变体的属性，针对不同字符类型可以这么设置：

• 要是你的字体有专门的大写字母变体（比如小型大写），可以用 font-variant-caps：

.text-block {
  font-family: "你的开源字体名称", sans-serif;
  /* 启用字体内置的大写字母变体，根据字体实际情况选值 */
  font-variant-caps: all-small-caps;
  /* 如果是混合大小写的特殊变体，换成 unicase */
  /* font-variant-caps: unicase; */
}

但如果你的字体是给常规大写字母做了单独的设计（不是小型大写），那可能需要用更精准的font-feature-settings来指定OpenType特性。

2. 直接指定 OpenType 特性（最精准） #

绝大多数开源字体的字符变体都是通过OpenType特性实现的，你可以查字体的官方文档，或者用FontForge这类工具打开字体文件，找到对应字符类型的特性代码（比如大写字母可能是ss01、case，数字可能是tnum、numr，标点可能是punc或者特定的样式集）。

举个实际例子，如果你的字体里大写字母对应ss01特性，数字对应ss02，那CSS代码可以这么写：

.text-block {
  font-family: "你的开源字体名称", sans-serif;
  /* 启用大写字母的样式集1，数字的样式集2 */
  font-feature-settings: "ss01" on, "ss02" on;
  /* 旧版webkit内核浏览器可能需要前缀 */
  -webkit-font-feature-settings: "ss01" on, "ss02" on;
}

3. 按Unicode范围拆分字体子集 #

如果上面的方法都不生效，还可以用@font-face给不同字符范围单独定义字体变体：

/* 定义大写字母专用的字体变体 */
@font-face {
  font-family: "YourFont-Caps";
  src: url("你的字体文件路径.woff2") format("woff2");
  unicode-range: U+0041-005A; /* 匹配A-Z所有大写字母 */
  font-feature-settings: "ss01" on; /* 启用对应变体特性 */
}

/* 定义数字专用的字体变体 */
@font-face {
  font-family: "YourFont-Nums";
  src: url("你的字体文件路径.woff2") format("woff2");
  unicode-range: U+0030-0039; /* 匹配0-9所有数字 */
  font-feature-settings: "ss02" on;
}

/* 主文本块应用字体，浏览器会自动匹配对应范围的子集 */
.text-block {
  font-family: "YourFont-Caps", "YourFont-Nums", "你的开源字体名称", sans-serif;
}

这个方法的精准度拉满，但前提是你要确认字体文件里确实包含这些字符的独立变体。

如果CSS满足不了你的需求（比如需要动态处理文本内容），可以用JS给不同类型的字符单独包裹标签，再设置样式：

// 给目标元素内的指定字符添加变体样式
function applyFontVariants(targetElement) {
  const originalText = targetElement.textContent;
  // 匹配大写字母、数字、常见标点符号，可根据需求调整正则
  const charRegex = /([A-Z])|([0-9])|([!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?])/g;
  
  const processedText = originalText.replace(charRegex, (match) => {
    let variantClass = "";
    if (/[A-Z]/.test(match)) {
      variantClass = "variant-cap";
    } else if (/[0-9]/.test(match)) {
      variantClass = "variant-num";
    } else {
      variantClass = "variant-punc";
    }
    return `<span class="${variantClass}">${match}</span>`;
  });
  
  targetElement.innerHTML = processedText;
}

// 调用函数处理目标文本块
const textBlock = document.querySelector(".text-block");
applyFontVariants(textBlock);

然后搭配对应的CSS：

.variant-cap {
  font-feature-settings: "ss01" on;
}
.variant-num {
  font-feature-settings: "ss02" on;
}
.variant-punc {
  font-feature-settings: "ss03" on;
}

这个方法能精细控制每个字符，但会修改DOM结构，如果文本是动态更新的，记得重新调用函数。

• 先确认你的字体文件确实包含对应字符的变体，用字体查看工具（比如FontForge）能快速验证；
• 优先用CSS方案，性能更好也更符合Web标准；
• 测试浏览器兼容性，font-feature-settings在现代浏览器都支持，但旧版Chrome/Firefox可能需要加前缀。

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