Web注意向下兼容

来源：合肥天琥设计培训学校时间：2019/2/26 18:08:21

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

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

同样地，你看到我们也为 Mac 系统使用了黑体作为 fallback。

Web不加双引号可以吗?

可以。有些英文字体的名称多于两个单词，因为单词中间有空格所以需要用 "" 包裹起来。中文字体很特别，按照英文的角度来看，像微软雅黑究竟算是一个词还是四个词呢?没关系，好在中文字体的名称里没有空格，所以 "" 不加也没什么大碍。

不过，谁都不能保证在任何操作系统/浏览器环境下都是如此，若是发生了奇怪的事情，不妨加上双引号试试看。

可以默认显示某种字体吗?比如微软雅黑

你可能注意到了，在我们最后的字体声明里，华文细黑是默认字体(如果你的系统上安装了声明里所有的中文字体的话)，为什么我要先声明 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;