根据语言的字体

Question

案例： 我有试卷 html，其中我的页眉、页脚和一些标题是英语，问题、选项和答案文本将是不同的语言，英语或印地语或马拉地语。所有数据均来自数据库。我有三种可用的字体 freeserif、freeserifbold 和 mangal。

问题： 我想为英文内容应用 freeserif 字体，为粗体文本应用 freeserif 粗体字体，为非英文内容应用 mangal 字体。 我做的是

@font-face {
        font-family: FreeSerif;
        src: url("<?= asset_url('fonts', 'FreeSerif.ttf'); ?>");
    }
    @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'); ?>");
    }
    body, html, font, * {padding: 0;margin: 0;font-family:"FreeSerif" !important;font-size:14px;}

但每次 mangal 字体都会被覆盖。我想将 freeserif 用于英文内容，将 mangal 用于非英文内容。

有没有更好的方法来做到这一点？

Answer 1

如果你在 html 中使用正确的语言属性，你可以在 CSS 中定位不同的语言（你应该这样做）

[lang="en"] {
  font-family: sans-serif
}

[lang="ne"] {
  font-family: serif;
}

<div>
  <p lang="en">this is english</p>
  <p lang="ne">and this is Nepali</p>
</div>