CSS 中的字体兼容写法：用CSS为英文和中文字体分别设置不一样的字体

　　font-family的调用方法：

font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei; font:bold 12px/0.75em Arial,'Times New Roman','Microsoft YaHei',SimHei;

　　根据font-family的原则，假如客户终端不认识前面的字体，就自动切换到第二种字体，第二种不认识就切换到第三种，以此类推。假如都不能识别就调用默认字体

　　根据font-family的字体调用原则，咱们能够为英文、中文等两种字体调用不一样的字体来渲染。如：Arial,'Times New Roman'这两种字体不认识中文，只认识英文，因此这两种字体只能渲染英文数字和一些特殊符号，而页面中的中文就会自动调用第三种字体Microsoft YaHei(PS:假如存在这种字体的话)。

　　因此在定义字体的时候把英文的字体写在前面把中文的写在后面。这样，系统就会自动按顺序依次给字用字体，若是当前字体不支持文本，自动换用列表中的下一个字体。

　　咱们来看一看 CSS 中字体的 Fallback 机制：

font-family: 'Helvetica Neue', 'Helvetica', 'Microsoft Yahei', sans-serif;

　　就这样一直找匹配的字体，直到系统默认，因此通常都把系统默认的5类字体放到 font-family 定义的最后来写。

　　那么一个国际化的站点应该如何设置多语种的字体呢？其前后顺序如何设定？这里强烈推荐 Airbnb 做为参考。

[lang="ja"] body{ font-family:"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic","MS Gothic”,
    "ＭＳ ゴシック","Helvetica Neue”,Helvetica,Arial,
    sans-serif !important } [lang="ko"] body{ font-family:"나눔 고딕","Nanum Gothic","맑은 고딕","Malgun Gothic”,
    "Apple Gothic","돋움",Dotum,"Helvetica Neue”,Helvetica,
    Arial,sans-serif !important } [lang^="zh"] body{ font-family:"Hiragino Sans GB”,"华文细黑","STHeiti","微软雅黑",
    "Microsoft YaHei",SimHei,"Helvetica Neue”,Helvetica,Arial,
    sans-serif !important }

　　不少开发者忽略了这一点：尽管咱们在操做系统中经常看到宋体、微软雅黑、华文细黑这样的字体名称，但实际上这只是字体的显示名称，而不是字体文件的名称。虽说在大多数状况下直接使用显示名称也有效，但有些用户却工做在一些很极端的状况下，这会致使你的字体声明无效。

　　好比说，用户安装了中文版的操做系统（这意味着系统有中文字体），可是却切换到了以英文为主要语言——这种状况在那些但愿增强英语锻炼的中文用户当中是很常见的。这时候，操做系统颇有可能没法按照显示名称找到正确的字体，因此咱们要记住的第一件事情就是： 同时声明中文字体的字体名称（英文）和显示名称（中文），就像这样：

Font-family: SimSun, “宋体” Font-family: “Microsoft YaHei”, “微软雅黑” Font-family: STXihei, “华文细黑”, “Microsoft YaHei”, “微软雅黑”

　　永远不要忘记声明英文字体，而且英文字体应该在中文字体以前

　　记住这个事实：绝大部分中文字体里包含英文字母（可是基本上都很丑），而英文字体里不包含中文字符。在网页里中/英文混排是很常见的，你绝对不会喜欢用中文字体显示英文的效果，因此必定不要忘了先声明英文字体：

Font-family: Georgia, SimSun, “宋体” Font-family: Arial, “Microsoft YaHei”, “微软雅黑”

　　做为一个 web 开发者，你理应对 Windows, Mac OS, Linux 家族等经常使用操做系统里的系统字体有足够的了解，特别是中文。在这里，咱们假设目标网站要同时给予 windows 用户和 mac 用户最好的字体体验，因而咱们能够这样声明：

Font-family: Helvetica, Tahoma, Arial, STXihei, “华文细黑”, “Microsoft YaHei”, “微软雅黑”, sans-serif

　　这句声明都作到哪些事情呢？让咱们一一说明（括号内表明其对应的目标操做系统）：

　　一、对于英文字符，首先查找Helvetica(Mac)，而后查找Tahoma(Win)，都找不到就用Arial(Mac&Win)；如果以上三者都缺失，则使用当前默认的sans-serif字体(操做系统或浏览器指定)；

　　二、对于中文字体，咱们已经了解其规则了。华文细黑(Mac)，微软雅黑(Win)是这两个平台的默认中文字体

　　注意向下兼容：

　　到此为止，咱们的字体声明已经很不错了——若是你没必要考虑还在使用旧版本操做系统的用户的话。遗憾地是，中文市场还有大量的用户在使用 Windows XP，宋体才是他们的主要中文字体。为了照顾到这些用户，你能够为微软雅黑增长一个 fallback：

font-family: Helvetica, Tahoma, Arial, STXihei, “华文细黑”, Heiti, “黑体”, “Microsoft YaHei”, “微软雅黑”, SimSun, “宋体”, sans-serif

　　一样地，你看到咱们也为 Mac 系统使用了黑体做为 fallback。