多语言试卷页面字体适配求助：英文与非英文字体区分应用

我来帮你搞定这个字体覆盖的问题！你的核心问题在于全局CSS里用了!important强制所有元素使用FreeSerif，直接把Mangal的优先级压得死死的，导致非英文文本根本没机会用上Mangal。下面给你几个逐步优化的方案：

问题根源分析 #

原来的代码里，font-family:"FreeSerif" !important这行是罪魁祸首——它强制所有元素（不管是英文还是印地语/马拉地语）都用FreeSerif字体，完全忽略了我们想要的多语言字体切换逻辑。

解决方案1：利用CSS字体栈自动匹配（最简单） #

CSS的字体栈机制会让浏览器优先尝试第一个字体，如果当前字符在第一个字体里没有对应的字形，就自动 fallback 到下一个字体。我们只需要调整全局字体设置，去掉!important，把Mangal作为FreeSerif的后备字体：

/* 先保留你的@font-face定义，注意补全font-weight属性让bold生效 */
@font-face {
  font-family: 'FreeSerif';
  src: url("<?= asset_url('fonts', 'FreeSerif.ttf'); ?>");
  font-weight: normal;
}
@font-face {
  font-family: 'FreeSerif';
  src: url("<?= asset_url('fonts', 'FreeSerifBold.ttf'); ?>");
  font-weight: bold;
}
@font-face {
  font-family: 'Mangal';
  src: url("<?= asset_url('fonts', 'mangal.ttf'); ?>");
}

/* 全局样式调整：去掉!important，用字体栈 */
body, html, * {
  padding: 0;
  margin: 0;
  font-family: FreeSerif, Mangal, sans-serif;
  font-size: 14px;
}

这样一来，英文文本会用FreeSerif（加粗的英文会自动匹配FreeSerifBold，因为我们正确定义了font-weight），而印地语/马拉地语这类FreeSerif不支持的字符，浏览器会自动切换到Mangal字体。

解决方案2：用unicode-range精准控制字符范围（更严谨） #

如果你想更精准地指定哪些字符用FreeSerif，哪些用Mangal，可以给@font-face加上unicode-range属性，明确划分字体负责的字符集：

@font-face {
  font-family: 'FreeSerif';
  src: url("<?= asset_url('fonts', 'FreeSerif.ttf'); ?>");
  font-weight: normal;
  unicode-range: U+0000-007F; /* 覆盖基本拉丁字符（英文） */
}
@font-face {
  font-family: 'FreeSerif';
  src: url("<?= asset_url('fonts', 'FreeSerifBold.ttf'); ?>");
  font-weight: bold;
  unicode-range: U+0000-007F;
}
@font-face {
  font-family: 'Mangal';
  src: url("<?= asset_url('fonts', 'mangal.ttf'); ?>");
  unicode-range: U+0900-097F, U+1CD0-1CFF; /* 覆盖印地语（Devanagari）及扩展字符 */
}

/* 全局字体设置和方案1一致 */
body, html, * {
  padding: 0;
  margin: 0;
  font-family: FreeSerif, Mangal, sans-serif;
  font-size: 14px;
}

这个方案能确保只有英文字符用FreeSerif，印地语/马拉地语字符强制用Mangal，避免出现某些边缘字符的字体混乱。

解决方案3：结合语言标记（如果数据库有语言信息） #

如果你的数据库里能区分内容的语言（比如给印地语内容标记lang="hi"，马拉地语标记lang="mr"），可以用CSS的:lang()伪类直接给对应语言的元素指定字体：

/* 英文默认用FreeSerif */
body, html, * {
  padding: 0;
  margin: 0;
  font-family: FreeSerif, sans-serif;
  font-size: 14px;
}

/* 印地语内容强制用Mangal */
:lang(hi) {
  font-family: Mangal, sans-serif;
}

/* 马拉地语内容强制用Mangal */
:lang(mr) {
  font-family: Mangal, sans-serif;
}

/* 加粗文本自动匹配FreeSerifBold */
strong, b, .bold-text {
  font-weight: bold;
}

这个方案的优势是逻辑更清晰，完全基于内容的语言属性来切换字体，适合内容语言标记明确的场景。

内容的提问来源于stack exchange，提问作者N.S