为什么要分别给中英文指定不同字体?

因为:1,一般的英文字体不带中文,中文必须用不同的字体显示;2,一般的中文字体虽然会带英文,但往往比较难看,比专门的英文字体难看得多。所以,需要中英文用不同的字体显示。

现在通常的做法是,在 CSS 里,把英文字体名字写在前面,中文字体名字写在后面。比如百度首页是这么写的:

body{ font-family: arial, 宋体, sans-serif; }

这样,理论上,浏览器会优先用英文字体显示文字,英文字体里没包含的字符,则从后面的中文字体里面找,这样就达到了中英文显示不同字体的效果(具体到各个操作系统和浏览器,还有不少差别,可参见 jjgod 的《浏览器如何渲染文本》)。比如上面的例子就是英文用 Arial,汉字用宋体。

这样的问题是:1,各个系统和浏览器的行为不同,有的用后面规定的中文字体,有的会用浏览器或系统默认字体。2,有的字符,可能英文字体和中文字体里都有,于是想用中文字形却显示成了英文字形(比如知乎上有人提出的中文破折号断开的问题)。

今天在 http://rishida.net/blog/?p=760 看到,可用 CSS3 的 @font-face 指定某编码范围内的字符使用某字体。因为是指定编码范围,所以这个办法高度灵活,不仅可以指定中英文分别使用不同字体,甚至可以指定某一个特定字符使用某个特定字体,并且无需格外使用 HTML 标签包裹文本。

原文中的例子:

@font-face {
  font-family: myJapanesefont;
  src: local(MS-Mincho);
}

@font-face {
  font-family: myJapanesefont;
  src: local(Gentium);
  unicode-range: U+41-5A, U+61-7A, U+C0-FF;
}

p {
  font-family: myJapanesefont;
}

原文是用日语举的例子,我们把粗体部分改成中文的 Unicode 编码范围就行了。此例中粗体范围的字符会用 Gentium 字体,其他会用 MS-Mincho 字体,我们使用时可根据自己的需要设置。

local() 表示先在用户电脑上寻找该字体,也可以指定备用字体或提供 WOFF 字体下载路径。

CSS3 的功能真心强大,可惜的是,此方法目前似乎只有 Chrome 和 Safari 支持,Firefox、Opera 和 IE9 都不行……所以目前还不实用……期待各浏览器快点跟上,用户们快点更新吧。

关于此方法的标准草案详见 http://www.w3.org/TR/css3-fonts/#unicode-range-desc