WordPress中英混排段落按语言切换字体的实现问题求助

一、为什么你的CSS unicode-range方案没生效？ #

你遇到的问题大概率是两个原因之一：

1. unicode-range 语法错误 #

你代码里的 U+2B740–U+2B81F 使用了中文破折号，而CSS要求必须用英文连字符 -。这个小错误会导致浏览器无法识别这个Unicode范围，进而让整个unicode-range规则失效——浏览器会认为NotoSans适用于所有字符，自然不会回退到Nunito。

修正后的unicode-range应该是：

unicode-range: U+4E00-U+9FFF, U+3400-U+4DBF, U+2B740-U+2B81F, U+3000-U+303F, U+FF00-U+FFEF;

我额外加了中文标点的范围（U+3000-U+303F 是中文全角标点，U+FF00-U+FFEF 是全角ASCII标点），这样中文标点也会应用NotoSans，排版更统一。

2. NotoSans字体文件本身包含英文字符 #

如果你的NotoSans字体文件（比如NotoSansCJKtc-Thin.otf）里包含了ASCII范围的英文字符，即使你设置了unicode-range，浏览器还是会优先用这个字体里的英文 glyph，因为它能匹配到。

验证方法：找一段纯英文文本，单独设置 font-family: 'NotoSans'，如果显示的是NotoSans的英文样式，说明字体文件包含英文字符。这种情况下，你可以换一个仅包含CJK字符的NotoSans版本，或者继续往下看JS方案。

二、JS包裹中文字符的方案是否更优？ #

这个方案的优劣势很明显：

• 优势：完全精准控制哪些字符用中文样式，不受字体文件内容、浏览器unicode-range兼容（比如旧版Safari可能有小问题）的影响；适合复杂的混排场景（比如你的例子里中文和英文交替出现的情况）。
• 劣势：会增加DOM节点数量，大量内容下可能轻微影响页面加载速度；动态加载的内容（比如评论、AJAX加载的文章）需要重新调用处理函数。

如果CSS unicode-range方案能完美解决，优先用CSS（更轻量化）；如果因为字体文件或兼容问题不行，JS方案是可靠的替代方案。

具体JS代码实现 #

下面的代码会递归遍历页面中的文本节点，自动把中文（包括中文标点）包裹到 <span class="chinese-font"> 中，同时避免重复处理已经包裹过的内容：

function wrapChineseCharacters() {
  // 匹配中文及中文标点的正则，覆盖常见CJK字符和标点
  const chineseRegex = /([\u4E00-\u9FFF\u3400-\u4DBF\u2B740-\u2B81F\u3000-\u303F\uFF00-\uFFEF])+/g;
  
  // 递归处理节点的函数
  function processNode(node) {
    // 跳过不需要处理的节点：script、style、textarea、input，以及已经有chinese-font类的元素
    if (node.nodeName === 'SCRIPT' || node.nodeName === 'STYLE' || 
        node.nodeName === 'TEXTAREA' || node.nodeName === 'INPUT' ||
        node.classList?.contains('chinese-font')) {
      return;
    }

    // 如果是文本节点，处理内容
    if (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim() !== '') {
      const text = node.nodeValue;
      // 用正则替换，把中文部分包裹成span
      const wrappedText = text.replace(chineseRegex, '<span class="chinese-font">$1</span>');
      // 如果内容有变化，创建新的span元素替换原文本节点
      if (wrappedText !== text) {
        const span = document.createElement('span');
        span.innerHTML = wrappedText;
        node.parentNode.replaceChild(span, node);
      }
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      // 如果是元素节点，递归处理子节点
      Array.from(node.childNodes).forEach(processNode);
    }
  }

  // 处理整个body，或者你可以指定具体的内容容器，比如document.querySelector('.post-content')
  processNode(document.body);
}

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', wrapChineseCharacters);

// 如果有动态加载的内容，在内容加载完成后调用wrapChineseCharacters()即可

然后你只需要在CSS里设置：

.chinese-font {
  font-family: 'NotoSans', sans-serif;
  font-weight: 200;
}
body {
  font-family: "Nunito", sans-serif;
}

这样就能确保只有被包裹的中文内容用NotoSans，英文内容保持Nunito。

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