javascript - 如何在同一行将不同的语言更改为不同的字体大小而无需每个容器都是唯一的？

Question

如何在同一行将不同的语言更改为不同的字体大小而不需要每个容器都是唯一的？是否可以？使用 css 还是 javascript？

div{
    font-family: "English", "中文" 
    font-size: 20px;
    // I need to make "中文" font-size 10px.
}



<div>This is English. 這是中文 This is English</div>
<div>This is English. 這是中文這是中文這是中文 This is English</div>
...

Answer 1

如果您使用 JavaScript 更改文本(因为您的问题允许使用 JavaScript)，您可以在 JavaScript 更改的结果上使用 CSS(正如其他人所说，需要添加容器)。

例如:

window.onload = function () {
    // Note that the following might also be used for Japanese or Korean
    // Note also that I have not included (deprecated) compatibility characters. As 
    //   per http://www.unicode.org/reports/tr38/#BlockListing , to cover those
    //   you would need to add:
    //     1. \u3358-\u3370\u337B-\u337F\u33E0-\u33FE (e.g., immediately after "\u32CB")
    //     2. \uFA2E-\uFA6D\uFA70-\uFAD9 (e.g., immediately after "\uFA29")
    //     3. Replace \uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29 with \uF900-\uFA2D OR if you want to keep the compat. listed separately from non-compat. (though there is no need for this), add the following, e.g., before \uFA0E: \uF900-\uFA0D\uFA10\uFA12\uFA15-\uFA1E\uFA20\uFA22\uFA25\uFA26\uFA2A-\uFA2D
    //     4. Immediately before ")+\s?)+/g", add |\ud87e[\udc00-\ude1d]

    // The portion \u2E80 up to \u32CB is for punctuation and special characters like radicals,
    //  but this does not support some punctuation characters which might be reused outside of 
    //  CJK as well as in CJK.
    var chineseChars = /((?:[\u2E80-\u2E99\u2E9B-\u2EF3\u2F00-\u2FD5\u2FF0\u2FFB\u3000-\u303F\u3105-\u312D\u3190-\u31B7\u31C0-\u31E3\u3220-\u3243\u3280-\u32B0\u32C0-\u32CB\u4E00-\u9FCC\u3400-\u4DB5\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\ud840-\ud868][\udc00-\udfff]|\ud869[\udc00-\uded6\udf00-\udfff]|[\ud86a-\ud86c][\udc00-\udfff]|\ud86d[\udc00-\udf34\udf40-\udfff]|\ud86e[\udc00-\udc1d])+\s?)+/g;
    document.body.innerHTML = document.body.innerHTML.replace(
        chineseChars,
        '<span lang="zh">$1</span>'
    );
};

使用你的 CSS:

body {font-size: 12px;} 
span:lang(zh) {font-size: 10px}

JSFiddle

我对 lang="zh" 的使用是基于一个假设，即您知道这些用于中文而不是日语或韩语。如果不知道，可以把JS中的span改成这样:

'<span class="cjk">$1</span>'

以及CSS的中文部分:

span.cjk {font-size: 10px}

这不会对语言做出任何假设，只会对字符做出假设。

JSFiddle