如何基于Unicode范围自动为混合语言文本切换字体族？

要实现同一行里的英语和马拉地语自动使用不同字体，无需给文本加类或ID区分，直接用CSS的@font-face结合unicode-range特性就能完成，核心逻辑是让浏览器根据字符的Unicode范围自动匹配对应的字体。

步骤1：定义两种语言的字体规则 #

分别为英语和马拉地语创建@font-face规则，指定各自的字体文件路径和对应的Unicode范围：

英文字体规则

英语常用字符（字母、标点）属于基本拉丁字符范围，用U+0020-U+007E就能覆盖日常使用的内容；如果需要支持带重音的拉丁字符，可以扩展为U+0000-U+00FF：

@font-face {
  font-family: 'EnglishFont';
  src: url('fonts/your-english-font.ttf') format('truetype');
  /* 覆盖常用英文及标点 */
  unicode-range: U+0020-U+007E;
}

马拉地语字体规则

马拉地语属于天城文（Devanagari），对应的Unicode范围是U+0900-U+097F，直接把这个范围指定给马拉地语字体：

@font-face {
  font-family: 'MarathiFont';
  src: url('fonts/your-marathi-font.ttf') format('truetype');
  /* 覆盖天城文所有字符，包含马拉地语 */
  unicode-range: U+0900-U+097F;
}

步骤2：全局应用字体列表 #

在全局选择器（比如body）里把两个字体加入font-family，浏览器会自动为每个字符匹配对应的字体：

body {
  font-family: EnglishFont, MarathiFont, sans-serif;
}

原理说明 #

浏览器渲染文本时，会逐个检查每个字符，在font-family列表里找到第一个unicode-range包含该字符的字体，用它来显示这个字符。这样混排的内容（比如HTML CSS किंवा Javascript,PHP वापरून भाषा कशी बदलायची?）里，英文部分会自动用EnglishFont，马拉地语部分会用MarathiFont，完全不需要手动区分文本。

注意事项 #

• 确保字体文件的路径正确，format值要和字体文件格式匹配（比如.ttf对应truetype，.otf对应opentype）。
• 可以在font-family末尾加兜底字体（比如sans-serif），防止出现不在两个Unicode范围内的特殊字符无法显示。
• 测试时可以用Unicode编码查询工具确认字符是否在指定的范围内，避免遗漏。

内容的提问来源于stack exchange，提问作者shubham v Vyawahare