有一 li 元素其中有中文和英文，怎麼分別設置他們的字體樣式呢？

01-01

有一種最基本的方法是「分別加一些html元素然後分別設置「但是這樣不太好。有點多這種情況的話就會設置很多元素。有方便快捷的方法嗎？
例子：
&這是一段測試文本，this is test text &

如果說只有一種這個 & 的話。我會這樣寫：
&&這是一段測試文本，&&this is test text&&
然後分別進行欄位設置就行了。但是如果很多這樣的元素的話這樣設置就不是很好了。

除了通過lang屬性標記後設定樣式，或者通過font-family的fallback機制之外（詳看@梁海等的答案），對於正確實現CSS3的font模塊 http://dev.w3.org/csswg/css3-fonts/ 的瀏覽器，就可以這樣：

@font-face {

font-family: "my font";

src: local("Microsoft YaHei");

/* my font 默認使用本地的雅黑字體 */

}

@font-face {

font-family: "my font";

src: local("Segoe UI");

unicode-range: U+0-2ff;

/* 指定 my font 中Unicode範圍U+02FF之前（即常用的西文部分）使用Segoe UI字體 */

}

li { font-family: "my font", "Segoe UI", "Microsoft YaHei", sans-serif; }

/* 指定li使用我們自定義的my font字體，如果瀏覽器尚不支持自定義字體，會fallback到後面的字體。 */

CSS3 font模塊草案中還有一個更複雜的例子：

http://dev.w3.org/csswg/css3-fonts/#unicode-range-desc

Consider a family constructed to optimize bandwidth by separating out Latin, Japanese and other characters into different font files:

/* fallback font - size: 4.5MB */
@font-face {
font-family: DroidSans;
src: url(DroidSansFallback.ttf);
/* no range specified, defaults to entire range */
}
/* Japanese glyphs - size: 1.2MB */
@font-face {
font-family: DroidSans;

src: url(DroidSansJapanese.ttf);
unicode-range: U+3000-9FFF, U+ff??;
}
/* Latin, Greek, Cyrillic along with some
punctuation and symbols - size: 190KB */
@font-face {
font-family: DroidSans;
src: url(DroidSans.ttf);
unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300;

}
For simple Latin text, only the font for Latin characters is downloaded:
body { font-family: DroidSans; }
&
This is that&
In this case the user agent first checks the unicode-range for the font containing Latin characters (DroidSans.ttf). Since all the characters above are in the range U+0-5FF, the user agent downloads the font and renders the text with that font.

Next, consider text that makes use of an arrow character (?):
&
This #x21e8; that&

The user agent again first checks the unicode-range of the font containing Latin characters. Since U+2000-2300 includes the arrow code point (U+21E8), the user agent downloads the font. For this character however the Latin font does not have a matching glyph, so the effective unicode-range used for font matching excludes this code point. Next, the user agent evaluates the Japanese font. The unicode-range for the Japanese font, U+3000-9FFF and U+ff??, does not include U+21E8, so the user agent does not download the Japanese font. Next the fallback font is considered. The @font-face rule for the fallback font does not define unicode-range so its value defaults to the range of all Unicode code points. The fallback font is downloaded and used to render the arrow character.

BTW，字體愛好者常有自行從幾個字體抽取一部分合成新字體的，原理是類似的。只是自行合成的字體多數不合法，無法普及，也非常不靈活。而CSS3就簡單靈活多了，並且這種對字體的組合利用是合法的。

另外一種方式是用腳本來遍歷每個字，判斷其unicode range和對應的字體，再動態創建元素和樣式。這種方式存在許多副作用，所以不建議。

【關於兼容性和fallback方式的補充】

@font-face現在的新瀏覽器都已經支持，如IE9+、基於WebKit的瀏覽器等。對於不支持@font-face的瀏覽器，可以用傳統的fallback方式。比較麻煩的是Firefox。Firefox早就支持@font-face，但是直到最近版本（8.0），仍然不支持unicode-range屬性。對此我們可以使用如下的fallback方法，在所有正常的@font-face規則之後加上一條@font-face作為firefox的fallback。比如假設我們希望對於firefox能fallback到Arial，可以這樣：

...

@font-face {

font-family: "my font";

src: local("Arial");

unicode-range: U+0;

}

因為FF不認識unicode-range屬性，所以相當於用Arial覆蓋了之前的所有規則。但其他瀏覽器只會覆蓋U+0000這個字元。另外，你也可以把Arial換成一個不存在的字體，例如local("No Such Font")，這樣就會fallback到後續字體，也就是和不支持@font-face的瀏覽器類似了。

對於所有正常的瀏覽器 [1]，CSS 的 font-family 屬性 [2] 的基本能力之一就是依其列表內字體的排序（優先順序）來顯示文字。

如果設定為「font-family: "Western Font", "Chinese Font", generic-family;」，就用第一項 "Western Font" 顯示西文（英文字母、英文標點、阿拉伯數字……），然後遇到漢字之類不受 "Western Font" 支持的字元就用下一項 "Chinese Font"。所以通常這樣就可以分別為英文和中文設定字體了。這是極其常見的手法。

例如：

「font-family: "Segoe UI", "Microsoft YaHei", sans-serif;」會讓「&這是一段測試文本，this is test text &」中的「this is test text」以 Segoe UI 顯示，而「這是一段測試文本，」以微軟雅黑顯示。

***

另外，如果要手動標記文本的語言，HTML 的 lang 屬性比自己寫的 class 更優雅也更高級。

例如：&&這是一段測試文本，&&this is test text&&

然後用 :lang(zh-CN) 和 :lang(en) 偽類來分別控制 font-family。當然你也可以省去默認的 lang 值，只標註特殊的（比如既然已經為整個頁面設定為 lang="zh-CN"，那就只標註 lang="en" 的文本）。

***

[1] 正常的瀏覽器：

比如 Windows 和 Mac OS X 的 Chrome、Safari 和 Firefox。

某些版本的 IE 以及（據稱）Linux 平台的某些瀏覽器——即不正常的瀏覽器——在某些情況下無法實現 font-family 屬性的要求，還會暴露出一些奇怪的 bug。這也是國內眾多開發者對 font-family 屬性了解不足或亂寫的原因之一。

[2] 如果有興趣和精力，最好大致看看 W3C 的 CSS 文檔之中涉及字體的這一部分：http://www.w3.org/TR/CSS2/fonts.html

font-family 設置兩種字體，前面一種是英文有效的字體，後面為中文字體。

以下測設代碼，選擇「elephant」作為英文字體，可以加粗，以示區別：

-----------&

font-family:elephant,"宋體"&

中文&

english&

1238739240&

,./~!""""&

，。/～「」『』&

------

-----------&

font-family:"宋體"&

中文&

english&

1238739240&

,./~!""""&

，。/～「」『』&

------

-----------&

font-family:elephant&

中文&

english&

1238739240&

,./~!""""&

，。/～「」『』&

------

-----------&

font-family:"宋體",elephant;

中文&

english&

1238739240&

,./~!""""&

，。/～「」『』&

------

從運行結果來看，「elephant」對中文字體及中文符號無效，宋體對中英文文字元號都有用，數字的字體取決於哪種字體在前。ie8，chrome測試通過。

還是建議寫一段腳本吧；把中英文單獨匹配出來，分別加樣式；這樣就可以隨意的指定中英文字體啦；例如：

"中英文字元串chinese and english string".match(/
([ws]+)|(W+) /g)

然後去替換裡面的內容，如果還考慮其他字元的話，可以重新寫這個正則就可以了；

CSS 沒有單獨區別分中文和英文這種樣式的寫法，這個和 li 沒有一毛錢關係，可果你只是想使英文使用不一樣的字體，那也倒好解決，使用中文不識別的字體即可，如果想給英文設其它樣式，估計用純 CSS 不好實現。

實際上你這個問題的本質是能不能對同一個容器里的英文和中文使用兩種字體和格式

說老實話還真沒試過字體我不敢保證但是樣式是肯定實現不了了

而且一般來說考慮到兼容性和字體顯示正常一般使用的字體也就那幾種只能中英文一起衡量

這個還有一個解決方法你可以考慮一下不過可能要根據你的網頁結構作修改

就是充分利用CSS的父元素繼承的寫法盡量少用id和class

就比如用p裝中文用span裝英文然後直接定位到父元素下所有的p或者span來進行樣式的修改

但是其他方面的布局可能要微調一下

僅供參考哈～～～