如何通过全局CSS/SCSS/正则仅为数字设置不同字体？

嘿，我完全懂你不想手动写几百个<span class="number-styling">的崩溃！下面给你两个精准的解决方案，优先满足你想要的SCSS方案，实在不行再用JS兜底：

方案一：纯SCSS/CSS实现（性能最优） #

这个方案利用CSS的unicode-range属性，直接为数字字符指定专属字体，不需要修改任何HTML标签，完全符合你的全局配置需求。

原理 #

unicode-range可以让字体仅作用于特定的字符范围，我们可以给全局元素设置字体栈，让数字部分自动使用你指定的$font-number，其他文本使用$font-main。

代码实现 #

// 全局字体变量配置
$font-main: 'Roboto', sans-serif;
$font-number: 'Montserrat', sans-serif;

// 给所有元素应用字体规则
* {
  // 默认主字体覆盖所有字符
  font-family: $font-main;
  
  // 仅对0-9的ASCII数字应用专属字体
  font-family: $font-number;
  unicode-range: U+0030-0039;
}

注意事项 #

• 确保你引入的Montserrat字体包含完整的数字字符（大部分主流字体都支持）
• 如果需要支持全角数字（比如０-９），可以把unicode-range扩展为U+0030-0039, U+FF10-FF19
• 这个方案是纯CSS，性能拉满，没有任何JS开销，优先推荐！

方案二：JavaScript自动包裹数字（兜底方案） #

如果因为字体兼容性或其他原因，CSS方案无法满足需求，可以用JS自动遍历页面文本，给数字加上指定类名，一次性搞定所有内容。

JS代码（自动处理所有数字） #

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  // 递归处理所有文本节点
  const wrapNumbers = (node) => {
    // 只处理文本节点
    if (node.nodeType === Node.TEXT_NODE) {
      // 匹配所有连续数字，用span包裹
      const numberRegex = /(\d+)/g;
      const updatedText = node.textContent.replace(numberRegex, '<span class="number-styling">$1</span>');
      
      // 只有当内容变化时才替换节点
      if (updatedText !== node.textContent) {
        const tempSpan = document.createElement('span');
        tempSpan.innerHTML = updatedText;
        node.parentNode.replaceChild(tempSpan, node);
      }
    } 
    // 遍历元素节点的子节点，跳过脚本和样式标签
    else if (node.nodeType === Node.ELEMENT_NODE && !['SCRIPT', 'STYLE'].includes(node.tagName)) {
      Array.from(node.childNodes).forEach(wrapNumbers);
    }
  };

  // 处理整个页面的内容
  wrapNumbers(document.body);
});

对应的SCSS样式 #

$font-main: 'Roboto', sans-serif;
$font-number: 'Montserrat', sans-serif;

// 全局主字体
body {
  font-family: $font-main;
}

// 数字专属样式
.number-styling {
  font-family: $font-number;
}

注意事项 #

• 如果页面有动态加载的内容（比如异步请求的列表），需要在内容加载完成后再次调用wrapNumbers函数
• 脚本会自动跳过<script>和<style>标签里的数字，避免破坏代码

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