如何在不同的每个容器中将不同的语言更改为同一行的不同字体大小？ [英] How to change different language to different font-size at same line without unique each container?

问题描述

如何在不同的每个容器中将不同的语言更改为同一行的不同字体大小？可能吗？使用css或javascript？

How to change different language to different font-size at same line without unique each container? is it possible? with css or 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>
...

推荐答案

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

If you alter the text using JavaScript (since your question allowed for JavaScript), you can use CSS upon the results changed by JavaScript (which as others have said, requires adding a container).

例如：

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中的范围更改为：

My use of lang="zh" is based on an assumption that you know these to be used for Chinese as opposed to Japanese or Korean. If you do not know, you can change the span in JS to this:

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

以及CSS的中文部分：

and the Chinese part of the CSS to this:

span.cjk {font-size: 10px}

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

That won't make any assumptions about the language, only the characters.

JSFiddle

这篇关于如何在不同的每个容器中将不同的语言更改为同一行的不同字体大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！