different font for different language

[GXY2017]

I am trying to set font for Chinese and English, but the following code does not work.

<style>
    :lang(zh) {
        font-family: "KaiTi";
    }
    :lang(en) {
        font-family: "Arial";
    }
    h1 {
        text-align: left;
        font-size: 40px;
    }
</style>

Please advice me. Thank you.

[yhatt]

If you want to use :lang pseudo-class selector, you have to mark parts of contents explicitly, by any HTML tags with lang attribute. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang

<span lang="zh-cmn-Hans">欢迎</span>

But typically that is not realistic. Nobody wants to mark all different languages manually.

In common web sites, a global font-family has been set to use multiple fonts, and CJK fonts tends to set as a fallback of fonts that have only latin glyphs. You can follow this approach also in Marpit theme CSS.

section {
  /* Use Arial first, and fallback to KaiTi if there were no glyphs. */
  font-family: Arial, KaiTi;
}

[GXY2017]

Thank you very much. With