css - 汉字的辅助字体

Question

CSS中是否有任何方法可以指定仅用于中文字符的不同字体？

具体来说，我有一些用户输入的文本，其中可以包含标准英文、汉文字符或两者的混合。我想对非汉字符使用 Myriad Pro，对所有汉字符使用 Kaiti Std。

我意识到这可以通过使用 JavaScript 运行内容来完成，在汉字周围添加 span 标签，然后对其应用样式，但是有没有更标准/更有效的方法？

我不关心旧浏览器，尽管它应该在最新版本的 Chrome/Firefox/Safari/IE 中工作。

Answer 1

您可以为 font-faces 指定 a unicode-range，以便每种字体仅适用于 unicode 字符的子集。

http://dev.w3.org/csswg/css-fonts/#composite-fonts

一个非常基本的实现看起来像（根据需要调整字体文件和格式）：

@font-face {
    font-family: 'MyFonts';
    src: local('Kaiti Std');
    unicode-range: U+4E00-9FFF;
}

@font-face {
    font-family: 'MyFonts';
    src: local('Myriad Pro');
}

body {
    font-family: 'MyFonts', sans-serif;
}

一些有趣的浏览器怪癖/解决方法记录在http://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/