如何改变不同的语言在同一行不同的字体大小，而没有唯一的每个容器？

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

Answer 2

http://jsbin.com/qozidepi/1/watch?js,output

联署材料：

// Get the div
var div = document.getElementById("text");

// Get the value
var value = div.innerHTML;

// Regular expression finds Chinese characters and wraps them
// in a span tag, which have font-size 40px
value = value.replace(/([\u3400-\u9FBF]+)/g, function(match){
  return "<span>" + match + "</span>";
});

// Set the div's value
div.innerHTML = value;