分享 Web 中文字体应用指南
Web 中文字体应用指南
在 Web 上应用字体是一项基本技术，同时也是一门艺术。对于英文字体来说可选择的范围实在是太广泛了，合理的使用它们将会为你的网站增色不少。关于英文字体的使用和搭配技巧，在这里不做赘述，只推荐一套非常好的视频：Fundamentals of Design by CodeSchool
而真正的挑战在于中文字体，由于中文字体组成的特殊性导致其体积过于庞大，除了操作系统内置的字体之外，我们很难在网站上应用其他的字体。在可选性很差的前提之下，如何正确的使用中文字体呢？
首先，以下的字体声明都是很糟糕的，切忌使用：
font-family: "宋体";
font-family: "宋体", Arial;
font-family: Arial, "宋体", "微软雅黑";
font-family: Helvetica, Arial, "华文细黑", "微软雅黑";
...
接下来，我们一步一步来说明如何定义好的字体声明。
中文字体也有英文名称
很多开发者忽略了这一点：尽管我们在操作系统中常常看到宋体、微软雅黑、华文细黑这样的字体名称，但实际上这只是字体的显示名称，而不是字体文件的名称。虽然说在大多数情况下直接使用显示名称也有效，但有些用户却工作在一些很极端的情况下，这会导致你的字体声明无效。
比如说，用户安装了中文版的操作系统（这意味着系统有中文字体），但是却切换到了以英文为主要语言——这种情况在那些希望加强英语锻炼的中文用户当中是很常见的。这时候，操作系统很有可能无法按照显示名称找到正确的字体，所以我们要记住的第一件事情就是： 同时声明中文字体的字体名称（英文）和显示名称（中文），就像这样：
font-family: SimSun, "宋体";
font-family: "Microsoft YaHei", "微软雅黑";
font-family: STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑";
永远不要忘记声明英文字体，并且英文字体应该在中文字体之前
记住这个事实：绝大部分中文字体里包含英文字母（但是基本上都很丑），而英文字体里不包含中文字符。
在网页里中/英文混排是很常见的，你绝对不会喜欢用中文字体显示英文的效果，所以一定不要忘了先声明英文字体：
font-family: Georgia, SimSun, "宋体";
font-family: Arial, "Microsoft YaHei", "微软雅黑";
另外还有一个好习惯，就是在最后补充英文字体族的名称。字体族大体上分为两类：非衬线和衬线，它们之间的区别和使用规则请见本文开始介绍的视频。一般来说，你应该这么做：
font-family: Georgia, SimSun, "宋体", serif;
font-family: Arial, "Microsoft YaHei", "微软雅黑", sans-serif;
请注意：以上两句声明中的宋体和微软雅黑不应该调换（尽管调换了也不会发生错误），这是因为从字体的式样来看，微软雅黑是非衬线的，而宋体才是衬线的。然而中文并不像英文那样严格区分字体族，所以这一点在实际应用当中并不那么重要。
别忘了照顾不同的操作系统
作为一个 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。
其他
不加双引号可以吗？
可以。有些英文字体的名称多于两个单词，因为单词中间有空格所以需要用 "" 包裹起来。中文字体很特别，按照英文的角度来看，像微软雅黑究竟算是一个词还是四个词呢？没关系，好在中文字体的名称里没有空格，所以 "" 不加也没什么大碍。
不过，谁都不能保证在任何操作系统/浏览器环境下都是如此，若是发生了奇怪的事情，不妨加上双引号试试看。
可以默认显示某种字体吗？比如微软雅黑
你可能注意到了，在我们最后的字体声明里，华文细黑是默认字体（如果你的系统上安装了声明里所有的中文字体的话），为什么我要先声明 Mac 系统的字体呢？
按理来说，大多数网站的主要目标市场还是 Windows 用户的，所以理论上这个才是合理的声明：
font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "微软雅黑", SimSun, "宋体", STXihei, "华文细黑", Heiti, "黑体", sans-serif;
但实际上却并非如此。在中文字体的用户群体里，很大一部分拥有 Mac 的人都同时安装了 Win 下常用的中文字体（这得归功于 Office for Mac）；但极少有 Win 用户去安装 Mac 下的中文字体。
因此，把 Mac 用字体声明在前面几乎不会对 Win 用户产生什么影响（因为他们压根没有！），倒是用来做 fallback 的黑体可能会取代微软雅黑的位置，所以更保险的做法或许是这样：
font-family: Helvetica, Tahoma, Arial, STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif;
但无论如何请不要把微软雅黑放在中文字体的最前面，作为史上最丑陋的中文字体之一，微软雅黑实在不是什么好的选择，请照顾一下被 Mac 宠坏的用户吧，谢谢！（仅代表个人观点）
BTW，如果你也像我一样不喜欢呆头呆脑的微软雅黑，那就干脆把它删了吧~
到此为止，虽然在我们的示例代码里没有包含 Linux 家族的例子，不过相信你也明白该怎么做了吧。
一点补充
鉴于一些人对微软雅黑的排位产生异议，我不妨把上文的解决方案再延伸一步。事实是这样子的：
把
微软雅黑放前面，会导致安装了微软雅黑字体的 Mac 用户不得不面对微软雅黑，而在 Mac 下比微软雅黑优雅得多的中文字体比比皆是；把 Mac 下的字体放前面，也会对 Windows 用户造成差不多的困惑，毕竟
微软雅黑是 Windows 平台下显示效果最好的字体（目前为止）；
1 和 2，哪一种出现的概率更大一些？我想这是一个不需要计算就能知道的答案吧？
但是——的确还有另外两个因素在纠结着：
不少 Windows 用户因为各种原因关闭了
ClearType，在此情形下微软雅黑将会惨不忍睹！但是 Mac 的字体也不是好的选择，真正的胜出者？猜对了，宋体。绝大部分 Mac 下的黑体在 Windows 下模糊不清，而
微软雅黑虽然丑但在 Mac 下至少能看。（间接体现了两个平台的字体渲染技术的差距）
所以在实践中，真正接近“万无一失”的方案需要考虑以下几点：
利用 UA 判断为不同的平台加载不一样的字体声明；
除非有特别的原因，否则尽量保持正文用
宋体，标题和其他可以放大些的地方用微软雅黑（针对 Windows）；Mac 下的
冬青体效果极佳，但是该字体在 Mac OS X 10.6 以前是没有的，所以谨慎考虑你的用户群体，或者使用华文黑体系列做 fallback；
最后，我不想再和任何人争论字体的优劣，本文的目的是介绍使用方法而不是字体选择。“美”或“丑”向来都是很主观的事情，只因为我是作者，所以我免不了会有倾向性，然而我也相信你自己会有正确的判断，和我较真没有任何实际意义。
别瞎黑微软雅黑，该字体不仅在英文、中文字体下表现得还算不错，在日文字体下也比那些所谓的Source Code Pro、以及老牌日文字体MS PGothic之类的玩意好很多
不敢苟同就不要苟同，原文已经很明确的说了“仅代表个人观点”，有什么不可以的么？
我“黑”微软雅黑是因为它是最 丑的中文字体之一，这无关于它诞生的原因是为了适应 windows 那可怜的字体渲染效果（事实上微软雅黑是微软专门为其 ClearType设计的纯粹用于电脑屏幕显示的字体，就清晰度和辨识度而言它做的很棒，但是美感？），而是因为仅就“中文”这个语种而言，该字体的横竖撇捺折毫无美感可言。只要从小练过两笔字的人都不会对此有任何异议。所以我说它是“最丑”的字体之一，而不是“可用性最差”的字体之一。
而在我原文之中，微软雅黑的确是用作 Win 平台下的默认字体的。之所以没有排在第一位仅仅是因为 Mac 下它并不好，而安装了 Office for Mac 的用户又很有可能在 Mac 下“遭遇”它，所以它排位稍稍靠后。若是两位不信可以发起一个针对 Mac 用户的投票，看看大家在 Mac 下会不会“钟爱”微软雅黑。
Source Code Pro 是等宽字体，微软雅黑是？否则何来可比性？用Source Code Pro写代码的大有人在，有多少用微软雅黑写代码的？
另外，本文说的是中文字体在 Web 下的应用，为何要与日文字体相比？为何要与等宽字体相比？
跑题也不是这么跑的，最讨厌的就是断章取义。
附赠一篇关于微软雅黑的讨论，它的优缺点自有公论。我认为它很丑，并不觉得我是在黑它，不过我还是保持个人观点，以后不再讨论。方法已经摆在正文了，到底要怎么用还得看自己的选择。
#13 楼 @ywjno 如果你有更好的选择去显示英文、日文……等等语言的文字，为什么一定要用微软雅黑做所有的事情？这一点我在正文里专门强调过，该用英文字体的时候就不要让中文字体越殂代疱，font-face 之所以可以设定多个字体并拥有优先级决策正是源自于此。
等宽字体最主要的作用就是用来编写代码，或其他类似的 Scripting Job，而且Source Code Pro这样的字体是纯英文字体，从设计之初就没有为中文或日文字形做过任何优化，所以如果遇到需要同时显示中、英、日等语言文字的情况，我们为什么要用 Source Code Pro 这样的等宽字体？同理反证，当我们需要为代码编辑器选择一种字体的时候，我们又为什么要选择微软雅黑，而不是其他等宽字体？你拿原本不应该是Source Code Pro做的事情来让它和微软雅黑进行对比是为了什么呢？能证明微软雅黑毫无缺陷吗？更何况现在很多应用环境都允许你为非 ASCII 字符 单独指定字体，比如 Terminal 或 iTerm:
我就不相信此种情况下会有人选择用微软雅黑来显示 ASCII 字符？（想想：font-face是不是也是如此？允许指定多种字体分别应用于 ASCII 或 非 ASCII 字符）
至于你推荐的两篇文章，抱歉我不懂日文无法看到你所说的“另一方面”指的是什么。不过我也饶有兴趣的看了看该网站使用的字体，貌似也没有用微软雅黑，或是其他什么能够兼顾中、英、日……的万能字体吧？
font-face: "Helvetica", "Arial", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
从策略上来看，倒是和我在正文中的描述如出一辙，由此可见在 Web 字体的选用上，微软雅黑仅仅是我们简体中文用户迈不过去的一道坎罢了，迈不过去的不代表它就是“毫无瑕疵”的，它的问题多了去了，我说它“丑”仅仅是一方面。另外请你注意：我从未说过有哪一个字体是“完美的”或“万能的”，所以你如此较真的话我真不知道是为了什么？
我们在这里讨论的就是在 Web 下应用中文字体的策略，我并没有说“不能使用微软雅黑”，仅仅是指出在一些情况下我们的确有比它更好的选择，并且从个人观点来看微软雅黑是一个专为 ClearType 技术和电脑显示屏优化的字体，它从文字的组成和结构上来看毫无美感。
至于繁体中文，如果我的网站不显示繁体中文（主要目标客户群体不是他们），我何必去纠结？反之那我肯定要在繁体中文环境下看看那种字体的表现更优异吧。然而字体的选择因地制宜，基本的策略和技巧却都是相通的，这篇正文的核心内容就是讲述这些策略技巧以及一些需要注意的地方，并没有为选择什么字体下一个所谓的“结论”，所以我想你是没看明白误会了。
Any further problems?
#15 楼 @PrideChung 是的，理论上来讲的确不合适——但是能用。
之所以这样不得以而为之，是因为中文字体留给我们的选择余地太少了。在某些特定的情况下，单一的宋体或微软雅黑都无法很好地工作，所以我们不得不选择一个作为另一个的后备，于是我们不得不把它们放在同一条声明里，这样一来只好如此了。
#17 楼 @nightire 我也没说出你文章的内容有不妥之处，而是告诉你微软雅黑它在某方面的还是有优点的，对于我来说就是在文本编辑器里面同时显示英、中、日字体的时候就是比较好看。（我从没说这个字体是个万能字体）
而那两篇文章则是介绍了不同字体的不同之处是在哪些地方，以及应该如何选择字体（日语看不懂看的配图也能看出来吧），不光是在 web，而是从通用的设计的方面进行讲解（那个系列也不是面对 web 的），毕竟也是有关字体选择的文章或多或少也能有些启发。（到时候跟人讨论说某某字体合适是因为留白之类的恰到好处什么的）
而繁体中文我以为包括在这次的讨论范围，毕竟笔画多的时候有些字就胡成一团。
不知道有谁认识 方正 的那些设计字体的人能给进行这方面介绍，毕竟这方面的文章还是相对较少
#20 楼 @willmouse 倒是还有一个，Requirements for Japanese Text Layout，该文章的日语版，不过这个纯粹是日语排版方面的东西，而且内容很多，不知道你喜不喜欢
ps：这文章居然在的是 w3.org 这个域名下，是属于 w3c 的标准么？
#22 楼 @ywjno 中文的字体可选择性非常多，但我们现在讨论的是 Web 环境下的选择，在这个前提之下可用的字体就这么些，你给出的那篇文章对于我们讨论的前提而言并没有什么意义，因为在 Web 下处理中文我们没有太多的选择。我知道你强调的是通用设计的范畴，但很遗憾即便如此微软雅黑依旧是丑，因为它根本就是只为屏幕显示而设计的，有多少适用于通用设计领域的字体是像它这样专为屏幕显示而设计？
有书籍排版印刷用微软雅黑的吗？有海报广告制作用微软雅黑的吗？除了显示在 Windows 平台的电脑屏幕里，还有任何“通用设计”场景里可以见到微软雅黑的吗？如果真的有，那恐怕也只能感叹这位设计者太没品位了吧？我个人曾经有两年的桌面排版和平面设计的工作经历，我深刻的记得印刷厂里负责底版制作的师傅们对于微软雅黑的态度是多么的深恶痛绝。直到我转战 web 开发才算是对它有了更加全面的认识，然而如你所说“从通用设计的角度来看”，微软雅黑不算史上最丑的中文字体，还有谁算？
你要我别乱黑微软雅黑，然而事实却是我黑它黑的非常准确，一点都不“乱”。你给出的参考资料恰恰证明了这一点：除了用于屏幕显示提高清晰度和可辨识度以外，微软雅黑在字体设计的层面的确是很失败的，若不然如何解释没人使用它做别的用途？原因无它，“丑”矣！这就是我“黑”它的地方，一点都不乱黑。
这种没什么干货的吐槽贴也可以成为精华？仅仅因为写的够长么？
关注英文字体的同学可以了解一下 http://www.google.com/fonts
用法
<!-- Headings -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800,700' rel='stylesheet' type='text/css'>
<!-- Text -->
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css' />
<!--[if lt IE 9]>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:700" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:800" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Droid+Sans:400" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Droid+Sans:700" rel="stylesheet" type="text/css" />
<![endif]-->
标题和小部分内容可以这么做，因为可能影响排版和效果
但网页主体和文章正文还是不声明中文字体比较好，各浏览器会选用系统字体，往往比人为设定的效果感觉更和谐。如果面向多语言用户，就更没必要设置非西文的字体了。
其实具体怎么选是每个开发者的自由，也不存在什么万全的妙法。但至少我们应该明白字体声明的规则和使用方法。这就好比代码怎么写也是程序员的自由，但至少明白基本的语法规则总是有利无弊的吧？尚不知道的朋友能够通过这篇文章了解知道了，那就足够了。怎么选？你的自由。
└─>fc-list | grep sim
.fonts/simkai.ttf: 楷体_GB2312,KaiTi_GB2312:style=Regular .fonts/simhei.ttf: 黑体，SimHei:style=Regular .fonts/SIMYOU.TTF: 幼圆，YouYuan:style=Regular .fonts/SIMLI.TTF: 隶书，LiSu:style=Regular .fonts/simfang.ttf: 仿宋_GB2312,FangSong_GB2312:style=Regular .fonts/simsun.ttc: 宋体，SimSun:style=Regular .fonts/simsun.ttc: 新宋体，NSimSun:style=Regular
linux 下面也可以使用 宋体
我觉得「雅黑 (方正兰亭黑)」和「信黑体」已经是很优秀适合阅读的字体。
至于说「雅黑」是史上最丑的字体，只能说某部分人的观点。
这里有个关于字体 css 项目，有用到「雅黑」，http://typo.sofish.de/ 当然理论上是最好的选择，至于在 windows 下面，什么字体都会变得那么难看，除了 12px 的 Simsun 和 11px 的 Mingliu、Pmingliu。
@nightire Hi! 我想在 bootstrap 3 里覆盖两个字体变量： $font-family-sans-serif: 'Helvetica Neue','Lantinghei SC', 'Microsoft Yahei','Hiragino Sans GB', STXihei, Helvetica, Arial, sans-serif; $font-family-serif: Georgia, 'Times New Roman', Times, SimSun, serif; 我这个设置对吗？
其实没有必要为 Windows XP 指定宋体，因为，即便不写，Windows XP 也还是会自动 fallback 到宋体的 而在字体列表里边指定宋体，还会有副作用的——用户系统里边本来有一些作为替代的而且比宋体更好的字体（但是没有被我们写进 font-family，这种情况可能对于 Linux 用户来说比较多吧），如果我们写了宋体，这些用户就会被强制使用宋体，他们很可能会骂娘的 所以最佳实践是——永远不要写宋体，除非你明确想要使用它
#55 楼 @riophae 你没注意到宋体的优先级最低么？本文说的方法其实是指如果你要自定义（指明）字体的情况下，应该怎么去定义 font-family。如果你不在乎这一点，认为让系统自己决定就可以了，那完全可以直接一个 serif 或 sans-serif 了事。然而这种完全依赖 serif 或 sans-serif 的方式是有缺陷的。某些浏览器会定义自己的默认字体来覆盖系统的行为，因此会出现在两种浏览器下字体表现不一致的情形。而写宋体，并且把它的优先级安排在最低的意思就是：“如果我声明的字体全部都无效，那就统一给我用宋体”。当然，你可以用别的作为最后的 fallback，本文写宋体呢只是举一个例子而已，并不是强制性的。
Ruby China 最新的设置：
body {
font-family: Helvetica, Arial, "PingFang SC", "Noto Sans", Roboto, "Microsoft Yahei", sans-serif;
letter-spacing: .03em;
}
