中文网页的字体

本站字体按照以下设置，正文字体大小采用18px，文档采用MARKDOWN编辑。

在 Web 上应用字体是一项基本技术，同时也是一门艺术。对于英文字体来讲可选择的范围实在是太普遍了，合理的使用它们将会为你的网站增色很多。关于英文字体的使用和搭配技巧，在这里不作赘述，只推荐一套很是好的视频：Fundamentals of Design by CodeSchool

{{more}}

而真正的挑战在于中文字体，因为中文字体组成的特殊性致使其体积过于庞大，除了操做系统内置的字体以外，咱们很难在网站上应用其余的字体。在可选性不好的前提之下，如何正确的使用中文字体呢？

首先，如下的字体声明都是很糟糕的，切忌使用：

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；


最后，我不想再和任何人争论字体的优劣，本文的目的是介绍使用方法而不是字体选择。“美”或“丑”向来都是很主观的事情，只由于我是做者，因此我免不了会有倾向性，然而我也相信你本身会有正确的判断，和我较真没有任何实际意义。

本文来自于nightire，原文地址。

原文连接：http://designlei.com/coding/%e4%b8%ad%e6%96%87%e7%bd%91%e9%a1%b5%e7%9a%84%e5%ad%97%e4%bd%93/