Nuxt-Strapi应用中双语文本的font-family正确设置方法

方法一：利用 unicode-range 精准控制字体覆盖范围 #

这是最直接的方案，通过为两种字体指定各自对应的字符范围，让浏览器自动根据字符类型匹配字体。

1. 重新定义字体加载规则，分别指定波斯字体和英文字体的覆盖字符集：

/* 波斯字体：仅覆盖波斯语字符及波斯数字 */
@font-face {
  font-family: 'PersianCustom';
  src: url('你的波斯字体路径') format('woff2');
  /* 包含波斯语基本字符、波斯数字及相关扩展字符 */
  unicode-range: U+0600-06FF, U+FB8A, U+0750-077F, U+FE70-FEFF;
}

/* 英文字体：仅覆盖ASCII字符（含英文数字、英文词汇） */
@font-face {
  font-family: 'EnglishCustom';
  src: url('你的英文字体路径') format('woff2');
  /* 覆盖空格到波浪号的所有ASCII字符 */
  unicode-range: U+0020-007F;
}

2. 为全局容器设置字体优先级：

#app {
  font-family: 'PersianCustom', 'EnglishCustom', sans-serif;
}

浏览器会自动判断字符所属范围：波斯数字（U+06F0-U+06F9）用波斯字体，英文词汇及其中的数字（U+0030-U+0039）用英文字体，完美解决冲突。

方法二：利用 CSS lang 属性（需内容支持语言标记） #

如果你的Strapi富文本内容能自动为英文词汇添加 lang="en" 属性（或通过Strapi编辑器手动标记英文段落/词汇），可直接通过语言选择器指定字体：

#app {
  font-family: var(--font1), sans-serif;
}

#app [lang="en"] {
  font-family: var(--font2), sans-serif;
}

这种方法无需修改字体加载规则，但依赖内容中的语言标记，适合能控制内容结构的场景。

方法三：JavaScript辅助标记英文片段（适配自动渲染内容） #

如果无法通过纯CSS解决，可通过JS检测页面中的英文词汇（含laravel-8这类带数字的英文标识符），自动为其添加样式类：

document.querySelectorAll('#app *').forEach(el => {
  const text = el.textContent;
  // 匹配包含英文和数字的词汇（可根据实际情况调整正则）
  const regex = /[a-zA-Z0-9\-_]+/g;
  el.innerHTML = text.replace(regex, match => {
    // 判断是否为英文主导的片段
    if (/[a-zA-Z]/.test(match)) {
      return `<span class="english-text">${match}</span>`;
    }
    return match;
  });
});

然后添加CSS：

.english-text {
  font-family: var(--font2), sans-serif;
}

这种方法无需修改后端内容，适合完全无法控制内容结构的场景。

内容的提问来源于stack exchange，提问作者hamid-davodi