css - 汉字的辅助字体

Question

在 CSS 中有什么方法可以指定一种不同的字体只用于汉字吗？

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

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

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

Answer 1

您可以为 font-faces 指定一个 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/