3被浏览504分享邀请回答1添加评论分享收藏感谢收起60被浏览14877分享邀请回答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-2
/* 指定 my font 中Unicode范围U+02FF之前（即常用的西文部分）使用Segoe UI字体 */
li { font-family: "my font", "Segoe UI", "Microsoft YaHei", sans- }
/* 指定li使用我们自定义的my font字体，如果浏览器尚不支持自定义字体，会fallback到后面的字体。 */
CSS3 font模块草案中还有一个更复杂的例子：
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: DroidS
src: url(DroidSansFallback.ttf);
/* no range specified, defaults to entire range */
/* Japanese glyphs - size: 1.2MB */
@font-face {
font-family: DroidS
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: DroidS
src: url(DroidSans.ttf);
unicode-range: U+000-5FF, U+1e00-1fff, U+;
For simple Latin text, only the font for Latin characters is downloaded:
body { font-family: DroidS }
&p&This is that&/p&
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 (?):
&p&This ⇨ that&p&
The user agent again first checks the unicode-range of the font containing Latin characters. Since U+ 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的浏览器类似了。2913 条评论分享收藏感谢收起w3.org/TR/CSS2/fonts.html402 条评论分享收藏感谢收起查看更多回答4被浏览6559分享邀请回答01 条评论分享收藏感谢收起1添加评论分享收藏感谢收起写回答33被浏览17398分享邀请回答0添加评论分享收藏感谢收起/ 会帮得到你.26 条评论分享收藏感谢收起查看更多回答}