用 CSS3 指定网页的中英文分别使用不同字体

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

因为：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

本文作者：Betty | 本文地址: https://myfairland.net/css-font-face-unicode-range/
本站文章除特殊标明者外均为原创，版权所有，如需转载，请以超链接形式注明作者和原始出处及本声明